Hook으로 상태 관리하기

상태 관리에 사용되는 Hook

useState

• 단순한 하나의 상태를 관리하기에 적합하다.

• const [state, setState] = useState(<초기값>)

• state가 바뀌면(업데이트 되면), state를 사용하는 component를 re-rendering

useRef

• 업데이트 되어도, re-rendering되지 않는 변경 가능한 값을 저장하는데 사용한다.
  (즉, 상태가 UI의 변경과 관계없을 때 사용한다.)

• const count = useRef(<초기값>) (const count = {current: 0} 과 동일하다.)
   count.current로 접근

• uncontrolled component의 상태를 조작하는 등 re-rendering을 최소화하는 상태 관리에 사용된다.

useContext

• component간 상태를 공유할 때 사용한다.
• 깊이 nested된 component라도 바로 context value에 접근할 수 있다.
• context value가 바뀌면 해당 context를 사용하는 모든 컴포넌트는 re-rendering

useReducer

• 복잡한 여러 개의 상태를 모아서 관리하거나 어떤 상태에 여러 가지 처리를 적용할 때 유용하다.

• const [state, dispatch] = useReducer(<reducer>, <초기값>)