프론트엔드
Jotai는 조-타이 라고 읽습니다.
두줄요약
Jotai를 Redux·Context API·Recoil과 비교하며 도입 배경과 선택 기준을 정리했습니다. atom, 파생 atom, Provider, 주요 유틸과 참조 안정성 주의점을 소개합니다.
문제 상황
- React의 state·props만으로 다수 상태를 여러 위치에서 공유할 때 발생하는 prop drilling
- Context API 값 변경 시 구독 하위 컴포넌트의 불필요한 리렌더링 우려
선택 이유
- 프로젝트 규모와 안정성을 고려한 Context API 보완 수준의 경량 상태 관리 라이브러리 필요
- Recoil의 atomic 방식에서 영감받은 구조, 작은 번들 크기, 낮은 React Hooks 학습 장벽
구조와 흐름
atom으로 독립 상태 조각을 생성하고useAtom으로 조회·수정- get·set 기반의 읽기 전용, 쓰기 전용, 읽기·쓰기 파생 atom 구성
- WeakMap 기반 atom 상태 추적과 Provider 기반 저장소 스코프 분리
주의할 점
- 렌더링 중
atom()을 직접 생성하지 않고 안정적인 참조 유지 - 동적 파생 atom 생성 시
useMemo활용 selectAtom으로 상태 조각을 분리해 관련 컴포넌트만 리렌더링
