chunee

setState props와는 다르게 state 값을 변경할 때는 state를 직접 조작해서는 안되며(this.state.mode = "~~" 이렇게 하면 안됩니다) 변경이 필요할 때는 setState메소드를 이용해야합니다. 왜냐하면 React.js의 경우 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링을 하는데 setState메소드를 사용하지 않고 직접 state 값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 못합니다. 즉 예를 들어 mode 값을 변경할때 this.setState({ mode: 'welcome' }); 말고 this.state.mode='welcome'로 변경을 하게 되면 react는 변경 사실을 모르고 그 이후의 작업을 하지 않습니다. bind render()안..

State는 props 처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만 , props는 컴포넌트에 전달되는 반면 , state는 컴포넌트 안에서 관리된다! props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다. state 객체를 사용하려면 render()함수 위에 constructor()함수를 적어준다. constructor 함수가 컴포넌트의 초기화를 시켜줘야 state에 값을 넣어 사용할 수 있기 때문이다. 이와 같이 위에서 state 값을 설정해주면 App 클래스 내부에서 중괄호를 사용하여 값을 사용한다. 시각적으로 봤을 때 훨씬 깔끔해짐!

처럼만 사용가능했던 컴포넌트를 App 컴포넌트에서 값을 직접 정의해서 사용하고 싶어 등장한 Props 이다. 컴포넌트의 요소에 props를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있다!! 즉, props는 컴포넌트끼리 값을 전달하는 수단이다! 이와 같이 props를 사용하여 컴포넌트의 요소를 지정해줄 수 있다. 이렇게 App 컴포넌트 안에서 Content 컴포넌트에게 값을 전달할 수 있다. (cheon , react prac 를 전달함!)

build: npm run build 커맨드를 통해 생성된 react 배포 폴더 public: static 자원이 위치하는 폴더 src: components ( 컴포넌트 파일 존재 ), containers ( 컨테이너 파일 존재 ) , pages , store 등이 위치하는 폴더 package: version, dependencies, proxy 등의 정보가 들어있는 파일 이 중 React의 중요한 파일 3가지 index.js App.js index.html을 살펴보자 index.js src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다. index.html에는 root 라는 div 가 있는데, in..