State 와 Lifecycle

State

리액트컴포넌트의 상태 ( 리액트컴포넌트의 변경 가능한 데이터 ) 이며, 자바스크립트 객체다.

state는 사전에 정의된것이 아니라 개발자가 정의한다.
정의할때는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.

state값을 변경하고 싶을때에는 직접 수정하지말고 setState 함수를 이용한다.

Lifecycle

최근에는 class컴포넌트를 잘 사용하지 않기때문에 이런 개념이 있다~ 정도로 넘어가자

리액트컴포넌트의 생성주기 (컴포넌트가 생성되고 사라지는 주기가 있다.)
Mounting -> Updating -> Unmounting

Mounting (출생) : 컴포넌트 생성
Updating (인생) : 생성된 컴포넌트가 props를 추가하거나, setState에 의해 state가 변경되거나, force 로 강제업데이트 하는등 여러번 렌더링된다.
Unmounting (사망) : 상위컴포넌트에서 현재컴포넌트를 더이상 화면에 표시하지 않게 될때

컴포넌트가 계속 존재하는것이아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.

개발자도구말고 react developer tools

react로 개발시에는 개발자도구보다 react developer tools를 설치해서 보는것이 더 편하다.

1. react developer tools 검색
2. 크롬에추가
3. 개발자도구에서 components탭 추가된것을 확인
   components : 현재화면에 존재하는 컴포넌트가 트리형태로 보이며, 각 컴포넌트를 누르면 props와 state 확인 가능
   profiler : 어떤컴포넌트가 렌더링되는지, 렌더링되는데 시간이 얼마나 소요되는지 확인할수있다
   => 불필요한 렌더링이나, 무거운 컴포넌트를 개선하여 성능향상을 할수있다.