티스토리 뷰
Jotai에 대한 글을 쓰는 이유
최근 사이드 프로젝트를 시작하게 되면서 상태관리 라이브러리를 선정해야 하게 되었다. 정말 다양한 상태관리 라이브러리 중에 Jotai가 눈에 들어왔다. 프로젝트 규모를 생각했을 때 jotai가 괜찮을 거라는 생각이 들어 Jotai에 대해 알아보는 글을 작성해보고자 한다.
상태(state)란?
- 리액트에서 이벤트에 의해 변경되는 동적인 값
- 웹 애플리케이션을 렌더링 하는 데 있어서 영향을 미칠 수 있는 값
상태 관리 라이브러리의 필요성
React에서 제공하는 기본적인 상태 관리 방식만으로는 복잡한 애플리케이션의 상태 관리를 완전히 해결하기 어렵다. 이러한 어려움으로부터 상태를 전역적으로 관리할 수 있는 상태 관리 라이브러리의 필요성이 대두되었다.
1. 리렌더링 최적화
- 상태 관리 라이브러리를 사용하면 상태가 변경될 때 필요한 컴포넌트만 리렌더링하게 할 수 있다. 이렇게 하면 불필요한 리렌더링을 줄여 애플리케이션의 성능을 최적화할 수 있다.
2. Props drilling
- 각 컴포넌트 간에 데이터를 전송하기 위해서는 prop을 통한다. 하지만 컴포넌트의 계층 구조가 깊어지면 깊어질 수록 Prop의 출처를 찾기 어려워지게 되는 경향이 있다.
- 위와 같은 이유로 중복된 코드가 증가하게 되고, 컴포넌트의 재사용성을 낮추는 사이드이펙트를 가지고 올 수 있다.
3. 복잡한 상태 업데이트 로직의 관리 용이성
- 대규모 애플리케이션에서는 비동기 작업이나 복잡한 상태 전이 과정이 빈번히 발생한다. 상태 관리 라이브러리에서는 이러한 작업을 중앙에서 처리하고, 코드의 일관성을 유지할 수 있는 방법을 제공한다
Jotai 개념
개념 및 구조
- Jotai는 원자(Atom) 개념을 기반으로 상태를 관리한다. 각 Atom이 상태를 관리하는 작은 단위로, React의 useState와 유사하게 사용할 수 있다.
- 상태는 React의 컴포넌트 트리에 종속되어 있으며, 필요한 부분에서만 상태를 구독하기 때문에 컴포넌트의 리렌더링을 최소화할 수 있다.
장점 및 단점
태와 로직을 분리하지 않아 컴포넌트가 간단하고 가독성이 높다. 단점으로는 큰 규모의 프로젝트에서 Jotai를 사용한다고 가정했을 때 자연스럽게 Atom이 많아지게 된다. Atom이 많아지면 구조 관리가 복잡해질 수 있으며, 상태가 많아지면 각각을 개별적으로 관리해야 하는 부담이 있다.
따라서 전역에서 관리할 데이터들이 정말 많지 않은 상황이라면, 최근 여러 플랫폼에서 적극적으로 도입하고 있는 Jotai를 사용해보는 것을 추천한다.
Jotai 기본 사용 예제
import React from 'react';
import { atom, useAtom } from 'jotai';
// 1. Atom 생성
const countAtom = atom(0); // 초기 값은 0
// 2. Atom을 사용하는 컴포넌트
function Counter() {
const [count, setCount] = useAtom(countAtom); // Atom에 접근
const increment = () => setCount(count + 1); // 값 증가
const decrement = () => setCount(count - 1); // 값 감소
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
export default Counter;
- atom 함수로 상태 객체를 만들고, useAtom 훅을 통해 Atom에 접근하여 상태를 읽고 업데이트한다.
- countAtom을 사용하여 상태 count와 setCount를 제공받으며, increment와 decrement 함수를 통해 상태를 변경한다.
파생 상태(Derived State) 예제
Jotai의 Atom은 단순한 상태 외에도 다른 Atom을 기반으로 파생 상태를 만들 수 있다. 파생 상태라고 하면 잘 와닿지 않는데... 쉽게 말해서 원래의 상태 값을 직접 변경하지 않고, 그 상태를 참고하여 새로운 상태를 만들어내는 것을 의미한다고 한다. 아래 코드와 함께 보면 의미를 파악하는데 도움이 될 것이라 생각한다!
import React from 'react';
import { atom, useAtom } from 'jotai';
// 원자 상태 정의
const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2); // 파생 상태 생성
function Counter() {
const [count, setCount] = useAtom(countAtom);
const [doubleCount] = useAtom(doubleCountAtom); // 파생 상태 사용
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return (
<div>
<h1>Counter: {count}</h1>
<h2>Double Counter: {doubleCount}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
export default Counter;
- doubleCountAtom은 countAtom을 참조하여 count * 2 값을 자동으로 업데이트 한다.
- get은 다른 Atom의 값을 가져오기 위한 함수로, 파생 Atom을 정의할 때 자동으로 제공되는 함수이다. get을 사용해 기존의 Atom 값을 참조하고, 이를 활용해 파생 상태를 만들 수 있다.
- doubleCountAtom을 사용하는 컴포넌트는 countAtom이 업데이트될 때만 다시 렌더링되어, 의존하는 값이 변경될 때만 컴포넌트가 재렌더링 된다.
비동기 상태 관리 예제
Jotai는 비동기 상태 관리도 쉽게 지원한다고 한다.
import React, { Suspense } from 'react';
import { atom, useAtom } from 'jotai';
// 비동기 Atom 생성
const userAtom = atom(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
const data = await response.json();
return data;
});
function User() {
const [user] = useAtom(userAtom); // 비동기 Atom 사용
return (
<div>
<h1>User Info</h1>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
</div>
);
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<User />
</Suspense>
);
}
export default App;
- userAtom은 fetch로 데이터를 가져오는 비동기 Atom.
- Suspense 컴포넌트로 비동기 상태를 감싸 로딩 상태를 관리할 수 있다.
마치며...
Jotai에 대해 알아보기 위해서 여기까지 오신 분들이 있을 것 같다. 앞서 말했듯, 상태관리 라이브러리는 다양하게 있어 선택의 폭이 넓다. 그렇기에 프로젝트에 가장 적합한 상태관리 라이브러리를 사용하는 것이 가장 좋을 것이라고 생각한다. 만약 상관이 없는 이야기라면 아무래도 남들이 가장 많이 사용하는 것을 사용하는 것이 좋다고 생각한다. (커뮤니티가 방대할 것이므로) 그렇기에 참고할 만한 자료를 남겨두겠다.
역시나 Redux는 넘사긴 하다...
- Total
- Today
- Yesterday