Redux - 상태 관리의 필요성

상태 관리란?

: 상태 관리 기술은 앱 상의 데이터를 메모리 등에 저장하고 컴포넌트에서 데이터를 공유하는 것.

앱이 사용하는 데이터가 많아지고 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상태 관리 기술을 도입해야 함.

state의 종류

1. Local state
: 데이터가 변경되어 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 (useState,useReducer를 사용해서 로컬 상태를 관리함.)
2. Cross-Component State
: 여러 개의 컴포넌트에 영향을 미치는 경우, props drilling으로 여러개의 컴포넌트에 걸쳐 변화를 적용해야 함.
3. App-Wide State
: 모든 컴포넌트에 영향을 미치는 경우. (유저 인증 상태 등)

Prop Drilling

• 컴포넌트가 복잡해지는 경우, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 보내야 하는 깊이가 깊어짐.

• context api, 기타 라이브러리를 활용하여 필요한 컴포넌트에서 데이터를 가져올 수 있음

• 컴포넌트 간의 결합성을 낮춤

  상태 관리의 장단점

• 장점
  - 높은 품질의 코드 작성 가능
  - 성능 최적화, 네트워크 최적화
  - 데이터 관리의 고도화

• 단점
  - 파악해야 할 로직과 레이어가 많아짐
  - 잘못 사용할 경우, 앱의 복잡도가 높아지고 성능을 악화(global state의 잘못된 활용 시 앱 전체 리렌더링 발생)
  

Flux Pattern

• 웹 애플리케이션 아키텍쳐 패턴
• Unidirectional data flow(단방향 데이터 흐름)를 활용, 데이터의 업데이트와 UI반영을 단순화
• React의 UI패턴인 합성 컴포넌트와 어울리도록 설계
  • data와 update가 한 방향으로 흐르기 때문에 UI의 업데이트를 예측하기 쉬움.

상태 관리에 사용되는 훅

useState
 - 단순한 하나의 상태를 관리하기에 적합
 - state가 바뀌면, state를 사용하는 컴포넌트를 리렌더함
 - useEffect와 함께, state에 반응하는 훅을 구축.
 
useRef
 - 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함.
 - 즉, 상태가 UI의 변경과 관계없을 때 사용.
 - Uncontrolled component의 상태를 조작하는 등, 리렌더링을 최소화하는 상태 관리에 사용됨.
 
useContext
 - 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용.
 - 부분적인 컴포넌트의 상태 관리, 전체 앱의 상태 관리를 모두 구현
 - Context Provide안에서 렌더링되는 컴포넌트는 useContext를 이용해 깊이 nested된 컴포넌트라도 바로 context value를 가져옴.
 - context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨.

useReducer
- useState보다 복잡한 상태를 다룰 때 사용
- flux pattern에 기반한 상태 관리를 구현
- nested state 등 복잡한 여러 개의 상태를 한꺼번에 관리하거나, 어떤 상태에 여러 가지 처리를 적용할 때 유용
- 상태가 복잡하다면 useState에 관한 callback을 내려주는 것보다 dispatch를 prop으로 내려 리렌더링을 최적화하는 것을 권장.