TIL: React | [공식문서 읽기] state와 생명주기 (hook - useState, useEffect) - 221207

state

useState hook 사용

state는 props와 유사하지만 비공개이며 컴포넌트에 의해 완전히 제어된다 (변경할 수 있는 값)

state는 직접 수정하지 않고 setState()를 통해서만 업데이트 한다
state는 컴포넌트에 속해있고 React는 state의 변화에 따라 화면을 렌더링한다

state 업데이트는 비동기적일 수 있다

React 는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한 번에 처리한다 (배치 작업)

데이터는 아래로 흐른다

state는 자신의 자식 컴포넌트에만 props 로 전달할 수 있다
그 외의 컴포넌트는 서로 어떤 상태를 가졌는지 알 수 없다
이 때문에 state는 로컬 또는 캡슐화라고 부른다

일반적으로 이를 하향식 또는 단방향식 데이터 흐름이라고 한다
state로부터 파생된 UI 또는 데이터는 오직 자신의 아래에 있는 컴포넌트에만 영향을 미친다

생명주기

useEffect() hook 사용

mount - update - unmount

useEffect의 deps에 []를 주면 mount 시 (didMount)
useEffect의 deps 에 [state] 를 주면 mount + update 시 (didUpdate)
useEffect에 return 함수 (clean up 함수) 를 주면 unmount 시 (willUnmount)

useLayoutEffect() hook 사용

useEffect 와 동일한 역할을 하지만
실행 시점이 mount/update 의 경우 render 시점에 실행된다