1. React 상태 관리의 흐름

- 복잡한 데이터를 어떻게 효율적으로 관리할까?

-> 상태 관리 : 화면에서 사용하는 데이터를 관리하는 것

 

- 문제 : Prop Drilling(하위 컴포넌트로 반복해서 Prop을 내려주는 것)

- 해결 : Context(여러 컴포넌트, 후손과 조상 간 데이터를 공유)

- 참고 : https://ko.legacy.reactjs.org/docs/context.html

 

 

- 문제 : 여기저기서 데이터를 손대면서 추적 및 문제 해결이 어려워짐

- 해결 : Flux(데이터의 변경을 한 곳에서 하면서 흐름을 정리)
-> 데이터를 변경하고 싶으면 액션을 만들어 Dispatcher에 전달 -> Store에 전달 -> 변경 후 렌더링

- 참고 : https://www.freecodecamp.org/news/how-to-use-flux-in-react-example/

 

 

- 문제 : 단순화

- 해결 : Redux

- 참고 : https://wikidocs.net/197737

 

 

 

- 문제 : Redux의 과사용으로 복잡성 증가, 비동기 처리의 어려움

- 해결 : React Query, SWR(클라이언트 state와 서버 state의 분리 -> 서버 상태는 서버와 알아서 동기화)

- 참고 : https://tech.kakaopay.com/post/react-query-1/

 

 

- 문제 : 상관없는 컴포넌트들이 함께 재렌더링, 데이터 구조와 컴포넌트 구조가 맞지 않아지면 결국 최상위로 모임

- 해결 : Recoil의 Atom(공유할 데이터를 컴포넌트 구조와 별개로 분리

- 참고 : https://recoiljs.org/ko/docs/introduction/core-concepts/