식초의 지식보관소

이벤트 강의에서 한 것 : Subject.js 파일에 있던 코드를 App.js의 Subject 컴포넌트가 있던 자리에 복붙해서 작업했다. 옮겨놨던 코드를 비활성화 한다. 그리고 원래 Subject 컴포넌트 코드를 돌려 놓는다. 이벤트 생산자가 된다! [제목을 클릭했을 때, welcome화면으로 바꾸고 싶다] [Subject 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때, 이벤트에 설치한 함수를 설치하도록 만든다] App.js 에서 Subject 컴포넌트에 onChangePage 이벤트를 입력한다. onChangePage라는 함수는 props의 형태로 Subject.js에 전달된다. Subject.js 에서 a 태그를 onClick 했을때, 함수가 실행되고, ..

props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것 state : props의 값에 따라서 내부의 구현에 필요한 데이터들이다, 복잡한 컴포넌트 만들 때 사용 State 사용 State 값 초기화 : render() 보다 먼저, constructor()함수 이용해서 코드를 짠다 constructor에서 this.state ={} : 초기화 subject: {title:'WEB', sub: 'World Wid Web'} : subject의 값을 스테이트화 시킨다 Subject 컴포넌트에서 : 리액트에서 코드를 인식하게 하려면 { }를 쓴다 외부에서 볼 수 없게 철저히 은닉하는 것이 좋은 사용성이다. 상위 컴포넌트의 state를 하위 컴포넌트로 props로 전달 가능하다. this.state ={}..

: pure.html 파일 : App.js 반드시 1개의 최상위 태그로 시작해야 한다 1. Subject 컴포넌트를 만들고, App 컴포넌트 넣는다 라이브 서버를 보면, Element -> 리액트가 내용을 로 바꿔서 적용해준다 (웹 브라우저는 리액트를 모르기 때문이다) jsx : 자바스크립트 유사 언어, 페이스북에서 만들었다 2. TOC 컴포넌트 만들고, App 컴포넌트 넣는다 라이브 서버를 보면, 리스트 추가된다 3. Content 컴포넌트 만들고, App 컴포넌트 넣는다 라이브 서버를 보면, 본문 추가된다 결론: 컴포넌트 이름에만 집중하게 함으로써 획기적으로 복잡도를 줄였다 컴포넌트의 내용을 다르게해서 이용하고 싶을 때! 효율적으로 사용하고 싶다면 이용한다. Subject 컴포넌트에서 코드 변경 { ..

오류 'react-create-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해결법 npm install -g react-scripts 입력후 이어서 설치 터미널 -> npm run start 터미널-> ctrl + C 리액트는 class type으로 이용한다 (오른쪽) 화면에 표시되는 내용은 연결된 App.js 파일 안에 내용 이다. import로 연결된 index.css 에서 작성한다. 저장하면 자동 실행. 오른쪽 클릭 -> 캐시 지우고 강력새로고침 버튼 create-react-app은 무겁다! 터미널 -> npm run build 입력 -> build 폴더 생긴다 build 폴더 : src 폴더의 내용을 최적화 했다 (버그해결, 심미적 문제 해결) 실..