08. 사용 사례 시나리오 2: Jotai
Jotai로 렌더링 최적화 하기, atom 값을 저장하는 방식 등 다양한 기능
🔖 1. Jotai란?
특장점
Jotai는 '원자(atom)'라는 가장 작은 상태 단위로 전역 상태를 정의하고, 필요한 컴포넌트에서 해당 atom만 사용하므로 상태 관리가 마치
useState를 전역으로 확장한 것처럼 자연스럽다.따로 Provider를 쓰지 않고도 atom을 직접 컴포넌트에서 가져다 쓸 수 있다. 따라서 복잡한 Context 설정 없이도 전역 상태를 관리할 수 있다.
특정 atom만 읽는 컴포넌트는 해당 atom에만 반응한다. 다른 atom이 변해도 렌더링되지 않으므로 불필요한 렌더링이 줄어든다.
atom을 비동기적 데이터 소스(예: fetch, async 함수)와 연결할 수 있어, 로딩 상태나 비동기 로직 처리에도 적합하다.
단점으로는 상태를 어디서 어떻게 atom으로 나눌지 설계가 필요하다는 점이 있겠다.
예시 코드
// Jotai에서 제공하는 기본 함수: atom, useAtom
import { atom, useAtom } from 'jotai';
// 1. atom 정의: 전역 상태인 count를 관리할 atom
const countAtom = atom(0);
// 2. 이 atom을 사용하는 컴포넌트
function Counter() {
// useAtom을 사용하면 [값, 업데이트함수]를 반환해,
// 마치 useState처럼 count를 읽고 바꿀 수 있다.
// useState(0) 대신, useAtom(countAtom)을 사용한다.
const [count, setCount] = useAtom(countAtom);
return (
<div>
<h1>유령이 얼마나 남았나요?: {count}</h1>
<button onClick={() => setCount((c) => c + 1)}>유령 +1 증가</button>
<button onClick={() => setCount((c) => c - 1)}>유령 -1 감소</button>
</div>
);
}
export default function App() {
return (
<div>
{/* Counter를 렌더링하는 어디서든 countAtom을 통해 상태를 공유함 */}
<Counter />
<Counter />
</div>
);
}
🔖 2. 하향식 접근 방법과 상향식 접근 방법
하향식(Top-down) 접근 방법
상위 레벨에서 전체 애플리케이션에 필요한 전역 상태 구조를 먼저 설계한 뒤, 그 구조에서 필요한 부분을 잘게 쪼개며 atom으로 정의하는 방식
초반에 전체적인 상태 모델(e.g. 전역 Store 등)을 어느정도 확정하고 시작하기에 큰 그림을 먼저 그리고 세부 atom을 나중에 채워 넣는 느낌
아무래도 상태가 복잡하거나, 프로젝트에서 전체적인 상태 모델 구조가 명확할 때 유용할 것 같다.
다만, 초반에 상태 모델 설계에 많은 고민이 필요하거나 나중에 구조가 바뀌면 일을 두 번해야 할 수도..
상향식(Bottom-up) 접근 방법
필요한 atom을 하나씩 만들고, 이 atom들을 점진적으로 조합하며 최종적으로 전역 상태 구조를 형성하는 방식
가장 작은 단위인 atom을 필요할 때마다 정의하고, 점차 이 atom들을 연결하거나 파생 atom을 만들면서 복잡한 상태를 형성한다.
요구사항 변화에 대응하기 쉬우나, 나중에 상태가 매우 많아지면 구조가 파편화될 수 있다.
Jotai는 Bottom-up, zustand는 Top-down 방식?
몇몇 블로그 글들을 보니 Jotai는 Bottom-up, zustand는 Top-down이라고 한다. 개인적으로 Zustand에는 어느정도 해당되는 말이나, Jotai에 있어서는 꼭 맞는 말은 아닌 것 같다.
Jotai의 경우, (책에서도 설명하듯) Jotai는 특정 접근 방식을 강제하지 않는다. 즉, Jotai는 Bottom-up과 Top-down 모두 구현할 수 있는 라이브러리다. 위에서 정리했듯 설계를 할 때 상태 구조를 어떻게 잡아가느냐에 따라 다르게 구현할 수 있는 것이다.
반면 Zustand는 store에 상태와 업데이트 로직을 모아두고, 컴포넌트에서 필요한 부분만 가져다 쓰는 방식이므로 Top-down에 가깝다고 볼 수 있을듯 하다.
공식 문서에서는 Jotai가 기존 Top-down 접근(선택자를 사용하고 memoization하는 방식)과 달리, Recoil의 영감을 받아 Bottom-up 접근이 자연스럽고 장점이 있다는 점을 말하고 있다.
🔖 3. 배열 구조 추가하기
Atoms-in-Atom
Jotai에서 배열 형태의 상태를 관리할 때 배열 자체를 하나의 atom에 담고, 그 배열의 각 요소가 또 다른 atom들을 참조하는 형태
쉽게 말해, '배열(atom) 안에 원소 하나하나도 각각 atom으로 관리하는' 패턴이다.
이렇게 하면 배열의 특정 원소만 변경되었을 때, 그 원소에 해당하는 atom만 업데이트되어 불필요한 리렌더링을 방지할 수 있다.
또한 배열에서 원소를 추가하거나 제거할 때도 해당 원소에 해당하는 atom만 조작하면 되므로 관리가 편해진다.
왜 이렇게 하는 걸까?
일반적으로 하나의 atom에 전체 배열을 담고 그 배열을 직접 변경하면, 배열 전체가 갱신되는 것으로 인식되어 배열 전체를 사용하는 컴포넌트가 다시 렌더링될 수 있다.
하지만 Atoms-in-Atom 방식에서는 각 원소를 별도의 atom으로 분리해, 그 원소를 필요로 하는 부분만 업데이트한다. 즉, 배열의 한 원소가 변해도 다른 원소를 참조하는 컴포넌트는 영향을 받지 않는다.
예시 코드
import { atom, useAtom } from 'jotai';
// 1. 각 item을 위한 atom을 만든다고 생각해보자.
const createItemAtom = (initialValue) => atom(initialValue);
// 2. 전체 item 리스트 atom 안에 'item atom'들을 담는다.
const itemsAtom = atom([
createItemAtom('Item 1'),
createItemAtom('Item 2'),
createItemAtom('Item 3'),
]);
function Item({ itemAtom }) {
// 각각의 itemAtom을 직접 useAtom으로 사용 가능
const [item, setItem] = useAtom(itemAtom);
return (
<div>
<input
value={item}
onChange={(e) => setItem(e.target.value)}
/>
</div>
);
}
function ItemList() {
const [itemAtoms, setItemAtoms] = useAtom(itemsAtom);
const addItem = () => {
// 새 item atom 추가
setItemAtoms([...itemAtoms, createItemAtom(`Item ${itemAtoms.length + 1}`)]);
};
return (
<div>
<button onClick={addItem}>item 추가</button>
<div>
{itemAtoms.map((itemAtom, index) => (
<Item key={index} itemAtom={itemAtom} />
))}
</div>
</div>
);
}
// Item 컴포넌트는 itemAtom을 직접 받아 해당 아이템의 값만 업데이트한다.
// 다른 아이템과는 무관하므로, 이 아이템 값이 바뀌어도 다른 아이템들은 재렌더링할 필요가 없다.
// 쉽게 말해, Item 1의 atom 값만 변경되면, 그 atom을 구독하는 컴포넌트만 업데이트된다.
// 나머지 Item 2나 Item 3와 관련된 컴포넌트는 그대로 유지되어 리렌더링되지 않는다.
export default function App() {
return (
<div>
<h1>Atoms-in-Atom 예시 코드</h1>
<ItemList />
</div>
);
}Last updated