[React] Jotai

🔷 Jotai란?

Jotai는 React 상태 관리를 위한 라이브러리입니다.

 

🔹 핵심 특징

1. 작고 가볍다
   → Redux보다 훨씬 간단하고, 코드도 짧게 쓸 수 있습니다.
2. Provider 불필요
   → 대부분의 경우 별도의 Context Provider 없이 바로 사용할 수 있습니다.
3. Recoil과 비슷하지만 더 단순
   → Recoil처럼 atom 개념이 있지만, 내부 구현은 더 간단합니다.
4. 직접적인 접근
   → 상태를 useAtom으로 직접 읽고 쓸 수 있어서 코드가 명확합니다.

 

🔹 사용 예시

 

1.먼저 useState와 같은 State의 역할을 하는

Atom을 자료형과 함께 초기화합니다.

 

export const addCategoryModalVisibleAtom = atom(false);

 

2. Atom을 생성할 변수, Atom을 변경할 함수를 useState와 같은 형식으로

괄호 안에 넣어 선언합니다.

 

const [addCategoryModalVisible, setAddCategoryModalVisible] = useAtom(addCategoryModalVisibleAtom);

 

3. set함수를 적절한 부분에서 사용합니다.

 

<button className="category-btn" onClick={() => setAddCategoryModalVisible(true)}>
    +
</button>

<Modal
    title="카테고리 추가"
    open={addCategoryModalVisible}
    onOk={handleAddCategory}
    onCancel={() => setAddCategoryModalVisible(false)}
>
    <Input value={newCategory} onChange={(e) => setNewCategory(e.target.value)} />
</Modal>

 

만약 Atom을 사용한 함수를 정의하고 싶으면 atom으로 감싸서 함수를 선언해줍니다.

이 함수를 Action함수라고 지칭합니다.

이때 atom의 get 기능을 사용해서 atom의 값을 가져올 수 있습니다.

그냥 atom값에 접근하게되면 atom은 객체이기 때문에

atom의 고유값이 나오게 되어서 값을 가져올 수 없습니다.

set기능을 사용하면 atom의 값을 변경할 수 있습니다.

 

export const handleCategoryOkAction = atom(
    null,
    async (get, set) => {
        const newCategory = get(newCategoryAtom);

        if (!newCategory) {
            set(messageAtom, { type: 'warning', content: '카테고리 이름을 입력하세요.' });
            return;
        }

        try {
            const response = await axios.post(`http://localhost:8080/api/categories/add_category`, {
                user_id: 'user123',
                category_name: newCategory,
            });

            const addedCategory = response.data; // 추가된 카테고리 정보
            console.log("📌 추가된 카테고리:", addedCategory);
            // 현재 카테고리를 새로 추가된 카테고리로 변경
            set(currentCategoryAtom, addedCategory.category_id);
            set(currentCategoryNameAtom, addedCategory.category_name);

            // 기존 카테고리 목록에 추가된 카테고리 추가
            set(categoriesAtom, (prevCategories) => [...prevCategories, addedCategory]);

            set(messageAtom, { type: 'success', content: '카테고리가 추가되었습니다!' });
            message.success("카테고리 추가 성공!");

            // 모달 닫기 및 입력 필드 초기화
            set(addCategoryModalVisibleAtom, false);
            set(newCategoryAtom, '');

            // 새 카테고리에 해당하는 요소 불러오기
            set(fetchElementsByCategoryAction, addedCategory.category_id);

        } catch (error) {
            console.error('카테고리 추가 실패', error);
            set(messageAtom, { type: 'warning', content: '카테고리 추가 실패!' });
        }
    }
);

 

Jotai를 사용하면 state를 전역에서 관리할 수 있고,

코드가 많아져서 구조화하려면 state값을 공유해야하기 때문에

atom을 사용해서 state를 관리할 수 있습니다.