전역 데이터 관리

프론트엔드에서의 전역 데이터 관리란
컴포넌트의 상태 데이터를 하나의 전역 스토어에서 관리하는 것을 말한다

전역 데이터가 없을 경우의 문제점

props drilling으로 코드가 굉장히 지저분해지고, 귀찮아지고, 복잡해 질 수 있다
하나의 상태 업데이트로 같은 상태를 props로 전달받은 모든 컴포넌트에서 재 렌더링이 일어난다

전역 데이터 관리를 하는 이유

없을 경우의 문제점을 해결하기 위해

한 곳에서 데이터를 모두 관리할 수 있음, 단방향 데이터 흐름을 갖는다

전역 데이터 관리 도구들

redux, recoil, mobX, zustand, jotai 등..

Redux

• 상태 변경이 일어나면 해당 상태를 사용하는 컴포넌트에만 재 렌더링이 일어남
• 조금 복잡한..?

MobX

• Mobx의 observer API가 클래스형 컴포넌트를 리턴하기 때문에, Hooks는 함수형 컴포넌트에서만 사용할 수 있다는 내용의 오류가 발생, mobx-react v6 또는 mobx-react-lite를 사용하면 해결됨
• 전역 데이터를 사용하지 않는 컴포넌트에도 접근을 하게 되어서 유닛 테스트에 부적합, context API를 활용 하길 권장함

Recoil

• React 전용 상태 관리 라이브러리기 때문에 React 내부 스케줄러에 접근 가능
• 가벼운 편
• 불필요한 렌더링을 피할 수 있다

Jotai

• React 특화 상태관리 라이브러리
• Recoil에서 영감을 받아 바텀 업 방식 아토믹한 상태 관리?
• 리코일과 다른 점은 atom에 key 값을 넣지 않아도 돼서 간편
• 불필요한 렌더링을 피할 수 있다

Zustand

• store 형태지만 보일러 플레이트가 최소화 된 방식
• 굉장히 쉽다
• redux와 약간은 비슷한 점이 있음
• 상태 변경이 일어나면 해당 상태를 사용하는 컴포넌트에만 재 렌더링이 일어남

Jotai와 Zustand는 개발진이 같고, TS로 작성되어 있음
Recoil은 JS로 작성되어 있음