[React] Jotai 사용해보기

 

Jotai는 Redux와 같은 전역 상태 관리 라이브러리 중 하나로, 특징은 다음과 같습니다.

• 제작자가 Recoil에서 영감을 받음
• Recoil처럼 상태를 Atom이라는 작은 단위로 나누어 관리함
• 보일러플레이트가 굉장히 단순하여 쓰기 쉽고, Redux에 비해 러닝커브가 낮음
• 자동 캐싱
• Redux에 비해 경량임
• Action에서의 비동기 처리를 위해 미들웨어를 설치해야 하는 Redux와 달리 비동기 처리가 간단함
• Recoil과 달리 타입스크립트 기반

 

개인적으로 Jotai를 알아본 제일 큰 이유는... Redux를 쓸 때마다 항상 보일러플레이트가 거창했던 게 거슬려서 새로운 라이브러리를 도입하는 것을 고려 중이기 때문입니다.

 

1. 설치

npm install -D jotai

 

 

2. Atom 생성 및 사용

Atom 생성 및 사용은 매우 쉽습니다. 일반 state의 사용법과 거의 동일하며, export를 통해 여러 컴포넌트에서 쓸 수 있다는 것만이 차이점입니다.

 

// store.tsx

import { atom } from 'jotai';

export const countAtom = atom(0);

 

여기서 만든 countAtom을 다른 컴포넌트에서 import하여 쓰면 됩니다.

 

// JotaiTest.tsx

import { useAtom } from "jotai";
import { countAtom } from "./store";

export default function JotaiTest() {
    const [count, setCount] = useAtom(countAtom);

    const countNum = () => {
        setCount(prevState => prevState + 1);
    }

    return (
        <div>
            <button onClick={countNum}>클릭</button>
            {count}
        </div>
    );
}

 

 

3. 비동기 요청 처리

이 또한 매우 쉽습니다.

// store.tsx

import axios from 'axios';
import { atom } from 'jotai';

export const getIPAddress = atom(async () => {
    const request = axios.get("http://ip.jsontest.com/");
    return request.then(response => response.data.ip);
})

 

ip 주소를 받아오는 테스트 API 서버로 요청하여 Promise를 반환하는 함수를 만들고 atom으로 감쌉니다.

 

// jotaiTest.tsx

import { useAtom } from "jotai";
import { getIPAddress } from "./store";
import { useEffect } from "react";

export default function JotaiTest() {
    const [ip, setIp] = useAtom(getIPAddress);

    useEffect(() => {
        console.log(ip);
    }, [ip])

    return (<></>);
}

 

 

결과

보다시피 Promise에 대해 아무런 처리도 해 주지 않았는데 놀랍게도 알아서 처리를 하고 결과값을 뱉어냅니다.

 

 

store가 따로 정해져 있지 않아서 atom을 이곳저곳에서 정의하여 중구난방이 될 수 있다는 점을 제외한다면 굉장히 유용하게 쓸 수 있을 것 같습니다. 그래서 특히 작은 프로젝트에서 더 유용하지 않을까 싶습니다.

 

이 라이브러리라면 리액트를 배운지 얼마 안 된 사람도 쉽게 쓸 수 있을 것 같지만... 아무래도 Redux 대신 이걸 먼저 쓰면 시야가 좁아지기 쉽겠죠. (그만큼 너무 쉬운 탓입니다...)

 

 

Jotai는 이런 기본적인 사용법 이외에도 다양한 기능들을 제공합니다.

• 값에 접근할 수 있도록 스코프를 지정하는 Provider
• Redux-Persist처럼 값을 브라우저의 스토리지에 저장할 수 있는 atomWithStorage Util
• 값을 초기값으로 돌리는 useResetAtom

 

 

---

참고한 사이트

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