Jotai

들어가며

React는 사용자 인터페이스를 구축하기 위해 많이 사용되는 JavaScript 라이브러리입니다. 그러나 React 애플리케이션을 개발할 때, 복잡한 상태 관리 문제를 다루어야하는 경우가 종종 발생합니다.

예를 들면 최상위 부모 컴포넌트에서 보내주는 데이터가 몇단계의 자식 컴포넌트로 전달되어야 하며 전달 받은 데이터로 인해서 상위의 상태값이 업데이트 되어야 할때… 쉽진 않겠죠?

이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용할 수 있습니다. 이번 글에서는 Jotai라는 React 상태 관리 라이브러리에 대해 간단히 살펴보겠습니다.

Jotai란?

React의 상태관리 라이브러리중 하나입니다. Jotai란 뜻은 일본어로 “상태”라는 의미인데요
Jotai를 사용했을때 리액트 애플리케이션에서 비교적 간결하고 쉽게 전역 상태관리를 할 수 있습니다.

Jotai는 리코일에서 영감을 받아 아토믹 모델과 함께 bottom-up 방식으로 접근합니다. 아톰과 함께 상태를 생성하고 아톰 의존성에 따라 렌더링 최적화를 하는데, 이 방식을 통해 리액트 컨텍스트의 리렌더링 이슈를 해결하고, 메모이제이션의 의존도를 줄일수 있다고 Jotai공홈에 설명되어 있습니다.(아직 recoil을 사용해 보지 못하여 추후에 기회가 있으면 recoil에 대해서 알아보겠습니다)

특징

• 최소한의 API
• TypeScript 기본 내장
• 작은 번들 크기
• 많은 추가 유틸리티 및 공식 통합
• 리액트에서만 사용 가능
• Next.js 및 React Native 지원
• atomic한 상태 관리 방식으로 구성

기본 사용법

Jotai는 사용법이 상대적으로 쉽고 간결한 편인데요 아래에 예시 코드를 보며 설명 드리겠습니다.

우선 npm을 이용해 Jotai를 설치해 줍니다.

npm install jotai

다음은 Jotai의 atom을 사용하여 상태를 생성하는 코드입니다.

import { atom } from 'jotai';

const countAtom = atom(0);

위 코드는 countAtom 이라는 이름의 상태를 생성하며, 초깃값으로 0을 설정합니다.

이제 이 상태를 컴포넌트에서 사용할 수 있습니다.

import { useAtom } from 'jotai';

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  function increment() {
    setCount((count) => count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

위의 예시 코드에서는, countAtom이라는 상태(atom)를 정의하고, useAtom 훅을 사용하여 해당 상태를 읽고 변경합니다. Counter 컴포넌트에서는 count 상태를 렌더링하고, 버튼 클릭 이벤트를 통해 해당 상태를 업데이트합니다.

프로젝트에 전역으로 관리될 상태값들을 성격에 맞도록 한곳에 정의해두어 필요시 해당 컴포넌트에서

import { useAtomValue } from 'jotai';
const count = useAtomValue(countAtom);

useAtomValue(read)읽기

import { useSetValue } from 'jotai';
const count = useSetAtom(countAtom);

useSetAtom(write)쓰기

위와같은 형태로도 사용이 가능합니다.

이렇게 Jotai 에는 세가지 패턴이 있습니다.

• 읽기(read),쓰기(write)
• 읽기(read)
• 쓰기(write)

이렇게 작성시 각각 읽기, 쓰기만 가져와서 사용하기 때문에 useAtom 과 다르게 재랜더링 하지 않는 장점이 있습니다.

매우 간단합니다 사용 방식이 리액트의 useState hook과 거의 흡사하죠 하지만 useState와 다르게 특정 컴포넌트에 구속되어있지 않습니다.

export const count = atom(0);

위와 같이 export 선언을 통해 어디서든 다른 컴포넌트에서 해당 atom값에 접근이 가능하죠

언제 사용하면 좋을까?

• jotai는 Redux나 MobX와 같은 다른 상태 관리 라이브러리보다 상대적으로 작은 라이브러리이기 때문에, 작은 규모의 프로젝트에서 사용하기 적합합니다.

• jotai는 Redux나 MobX와 같은 다른 상태 관리 라이브러리에 비해 보다 단순하고 직관적인 API를 제공합니다. 따라서 간단한 상태 관리에 적합합니다.

• jotai는 React의 새로운 Context API와 함께 작동하며, Context API의 간편한 사용법을 이용하여 상태 관리를 할 수 있습니다. 따라서 Redux나 MobX와 같은 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있습니다.

• jotai는 불변성 라이브러리인 Immer와 함께 사용하면서도 상태의 불변성을 보장하면서 코드의 가독성을 높일 수 있습니다.

• jotai는 상태 변화를 추적하기 쉽게 만들어줍니다. 이는 디버깅이나 개발 과정에서 도움이 됩니다.

마치며

간단하게 리액트의 상태관리 라이브러리인 Jotai에 대해서 알아봤는데요

리액트에서 useState와 context api 만으로 상태관리를 진행하거나 고려중이라면 Jotai를 도입해 보는 것도 좋을것 같습니다. 물론 깊이 파고들어 내부구조 및 최적화 부분까지 이해하고 사용하기에는 쉽진 않겠지만 상대적으로 낮은 러닝커브와 제공되는 유틸들이 다양한데도 불구하고 총번들 사이즈가 다른 라이브러리에 비해 낮은편인건 충분히 매력적인 도구라 생각됩니다.

참고문서

• Jotai 공식 홈페이지