[엘리스 AI트랙] React Hook으로 상태관리 하기

1. useState

• 단순한 하나의 상태를 관리하기에 적합함
• const [state, setState] = useState(initState | initFn)
• 리액트는 state가 바뀌면 state를 사용하는 컴포넌트를 리렌더함
• useEffect와 함께, state에 반응하는 hook을 구축
• 패턴
  • 상위 컴포넌트에서 state와 state 변경 함수를 정의
  • 그 state나 변경 함수를 사용하는 컴포넌트까지 prop으로 내려줌
• state가 변경되면 중간에 state를 넘기기만 하는 컴포넌트들도 모두 리렌더링됨

➡️ 상태와 상태에 대한 변화가 단순하거나, 상대적으로 소규모 앱에서 사용하기에 적합

---

2. useRef

• 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함 ➡️ 상태가 UI의 변경과 관계없을 때 사용 

리액트 컴포넌트에서의 상태는, 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있음

• 사용 예시
  • settimeout의 timerId 저장
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll 위치
  • 결제 페이지에서 필수 정보를 입력하지 않았을 때 그 input 컴포넌트로 focus 하기
• uncontrolled component의 상태를 조작하는 등, 리렌더링을 최소화하는 상태관리에 사용됨 (ex: Dynamic Form)
• 내부적으로 값을 업데이트하다가 외부적인 이유로 컴포넌트가 리렌더링 되면 그 때 변경된 값이 보여짐

3. useContext

• 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용
• 부분적인 컴포넌트들의 상태 관리, 전체 앱의 상태 관리를 모두 구현
• Context Provider 안에서 렌더링되는 컴포넌트는 useContext를 이용해 깊이 nested된 컴포넌트라도 바로 context value를 가져옴
• context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨  ➡️데이터를 변경할 때 주의할 필요 있음
• state를 넘길 필요가 없으며 컨텍스트를 참조하는 컴포넌트들만 렌더링됨
• 패턴
  • Provider 단에서 상태를 정의하고, 직접 상태와 변경 함수를 사용하는 컴포넌트에서 useContext를 이용해 바로 상태를 가져와 사용
• useReducer와 함께 복잡한 상태와 상태에 대한 변경 로직을 두 개 이상의 컴포넌트에서 활용하도록 구현 가능
• state는 필요한 곳에서만 사용하므로, 불필요한 컴포넌트 리렌더링을 방지
• Prop Drilling(Plumbing)을 방지하여 컴포넌트 간 결합도를 낮춤

  ---

4. useReducer

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