식초의 지식보관소

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 폴더의 내용을 최적화 했다 (버그해결, 심미적 문제 해결) 실..