목록 보기
Atomic state management – Jotai
프론트엔드

Atomic state management – Jotai

화해
화해
2021년 7월 1일

두줄요약

Jotai의 atomic state management 구조와 Context 재렌더링 문제 완화 방식을 소개했습니다. 파생 atom, 비동기 처리, 렌더링 최적화와 외부 라이브러리 통합 사례를 정리했습니다.

구조와 흐름

  • Context 전체 갱신에 따른 하위 컴포넌트 재렌더링 문제를 원자 단위 상태 구독으로 분리
  • atom과 useAtom 기반의 작은 상태 조합, 읽기·쓰기·파생 atom 구성
  • Provider-less 모드와 scope 기반 Provider, WeakMap 기반 atom 상태 관리

선택 이유

  • useState·useReducer와 유사한 최소 API 및 key 없는 atom 생성 방식
  • Recoil의 atomic model 영향과 Context Selector 접근의 연속성
  • React Query, Redux, XState, Zustand 등 외부 상태 관리 도구와의 공식 통합

성능/운영 포인트

  • 변경된 atom을 구독하는 컴포넌트 중심의 선택적 렌더링
  • atom 미사용 시점의 GC 고려와 대용량 객체 focus·배열 split 기반 렌더링 최적화
  • Concurrent Mode의 tearing 대응 및 useMutableSource 연계 고려

적용해볼 점

  • Context만으로 상태를 관리하는 프로젝트의 재렌더링 최적화 대안
  • 비동기 atom과 Suspense, 또는 loading·error·data 직접 관리 방식 활용
  • atom in atom, atomFamily, splitAtom, focusAtom 기반의 세분화된 상태 모델링

다음 읽기

#React 주제를 다룬 다른 회사 글

Jotai는 조-타이 라고 읽습니다.

Jotai를 Redux·Context API·Recoil과 비교하며 도입 배경과 선택 기준을 정리했습니다.\natom, 파생 atom, Provider, 주요 유틸과 참조 안정성 주의점을 소개합니다.

더핑크퐁컴퍼니
더핑크퐁컴퍼니
프론트엔드

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...