치악산 복숭아

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

elice/토끼성장일지

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

Juliie 2021. 11. 6. 15:15

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으로 내려 리렌더링을 최적화하는 것을 권장
0 Comments
댓글쓰기 폼