[week_09] React 상태 관리

1. 상태 관리

• 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것
• 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함

1-1. MPA와 SPA에서의 상태 관리

• MPA: 서버의 데이터를 이용해 페이지를 렌더링 ➡ 클라이언트 데이터와 서버의 데이터가 큰 차이를 가지지 않는다.
• SPA: 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리. 그 외의 데이터는 클라이언트만의 데이터로 유지.

1-2. 상태 관리 기술이 해결하는 문제들

1) 데이터 캐싱과 재활용

• SPA에서 페이지 로딩 시마다 모든 데이터를 로딩한다면, 사용자 경험 측면에서 MPA를 크게 넘어서기 힘들다.
• 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활용
• 변경이 잦다면, 데이터의 변경 시점을 파악해 최적화

2) Prop Drilling

• 컴포넌트가 복잡해지느 경우, 상위 부모와 자식 컴포넌트 간의 깊이가 커진다.
• Context API 등을 활용해서, 필요한 컴포넌트에서 데이터를 가져올 수 있다.
• 컴포넌트 간의 결합성을 낮춘다.

 

2. Flux Pattern

• 웹 애플리케이션 아키텍처 패턴
• Unidirectional(일방향) data flow를 활용, 데이터의 업데이트와 UI 반영을 단순화
• 하나의 Action이 하나의 Update만을 만들도록 한다.
• data와 업데이트가 한 방향으로 흐르므로 UI의 업데이트를 예측하기 쉽다.

2-1. Flux 구조

• Action ➡ Dispatcher ➡ Store ➡ View 순으로 데이터가 흐른다.
• store는 미리 dispatcher에 callback을 등록해, 자신이 처리할 action을 정의
• action creator는 action을 생성하여 dispatcher로 보냄
• dispatcher는 action을 store로 넘김
• store는 action에 따라 데이터를 업데이트 후, 관련 view로 변경 이벤트 발생
• view는 그에 따라 데이터를 다시 받아와 새로운 UI를 만듦
• 유저 인터렉션이 발생하면 view는 action을 발생

 

3. useState, useRef, useContext, useReducer

• 함수형 컴포넌트에 상태를 두고, 여러 컴포넌트 간 데이터와 데이터 변경 함수를 공유하는 방식으로 상태를 관리한다.

3-1. useState

const [state, setState] = useState(initState | initFn)

• 단순한 하나의 상태 관리에 적합
• state가 바뀌면, state를 사용하는 컴포넌트를 리렌더
• useEffect와 함께 state에 반응하는 훅 구축

3-2. useRef

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

3-3. useContext

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

3-4. useReducer

const [state, dispatch] = useReducer(reducer, initState)

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