8. useState, useRef, useContext, useReducer

useState

 

• 단순한 하나의 상태를 관리하기에 적합.
• const [ state, setState ] = useState( initState | initFn )
• state가 바뀌면, state를 사용하는 컴포넌트를 리렌더함
• useEffect와 함꼐, state에 반응하는 훅을 구축

 

useRef 

 

• 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함
• 즉, 상태가 UI의 변경과 관계없을 때 사용 ex) setTimeout의 timerId 저장
• uncontrolled componenet의 상태를 조작하는 등, 리렌더링을 최소화하는 상태 관리에 사용됨. 

 

useContext

 

• 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용
• 부분적인 컴포넌트들의 상태관리, 전체 앱의 상태 관리를 모두 구현
• Context Provider 안에서 렌더링되는 컴포넌트는, useContext를 이용해 깊이 nested 된 컴포넌트라도 context value를 가져옴
• context value 가 바뀌면 내부 컴포넌트는 모두 리렌더링됨

 

useReducer

 

• useState 보다 복잡한 상태를 다룰 때 사용
• 별도의 라이브러리 없이 fulx pattern 에 기반한 상태 관리를 구현
• const [ state, dispatch ] = useReducer( reducer, initState )
• nested state 등 복잡한 여러 개의 상태를 한꺼번에 관리하거나. 어떤 상태에 여러 가지 처리를 적용할 때 유용
• 상태 복잡하다면, useState에 관한 callback 을 내려주는 것보다 dispatch 를 prop 으로 내려 리렌더링을 최적화하는 것을 권장