[JS][REACT] 리액트 정리 4 (상태 관리)

상태관리

- 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것

- 한 컴포넌트 안에서의 상태 , 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리 모두 포함

- MPA에서는 서버의 데이터로 렌더링하므로 클라이언트와 데이터와 서버의 데이터 차이가 크지 않음

- SPA에서는 자체적으로 데이터를 갖고 서버와의 동기화가 필요한 데이터만 처리

- 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 생김

- 백엔드와의 데이터 통신도 충분히 고려해야함

 

상태관리 기술의 장점 / 단점

- 높은 품질의 코드를 작성, 성능 최적화, 네트워크 최적화에 유리

- 데이터 관리의 고도화

- 파악해야할 로직과 레이어가 많아짐

- 잘못 사용할 경우 앱의 복잡도만을 높이거나 성능을 악화

 

데이터 캐싱과 재활용

- 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활용함

- 변경이 잦다면, 데이터의 변경 시점을 파악해 최적화

 

Prop Drilling

- 컴포넌트가 복잡해지는 경우 상위 부모와 자식 컴포넌트 간의 깊이가 커짐

- 컴포넌트 간의 결합성을 낮춤 , Context API등을 활용해서 컴포넌트에서 데이터를 가져옴

 

상태 관리에 사용되는 훅

- 외부 라이브러리 없이 React가 제공하는 훅 만으로 상태 관리를 구현하기 위해 사용

- 함수형 컴포넌트에 상태를 두고 , 여러 컴포넌트 간 데이터와 데이터 변경 함수를 공유하는 방식

 

uesState

- 단순한 하나의 상태를 관리하기에 적합함

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

- state가 바뀌면 , state를 사용하는 컴포넌트를 리렌더함

- useEffect와 함깨 state에 반응하는 훅을 구축

 

useRef

- 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함

- 상태가 UI의 변경과 관계없을 때 사용, 리렌더링을 최소화하는 상태 관리에 사용됨

 

useContext

- 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용

- 부분적인 컴포넌트 , 전체 앱의 상태 관리를 모두 구현

- context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨

 

useReducer

- useState보다 복잡한 상태를 다룰 때 사용

- 별도의 라리브러리 없이 flux pattern에 기반한 상태 관리를 구현

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