jotai 활용하기

이번 프로젝트를 진행하면서 jotai를 쓰기로 했다 !
그러면서 공식 문서를 공부 할 필요성을 느껴서 공부를 했다 ..🤪

jotai 는 뭘까?

공식 홈페이지에서 매우 작은 3kb의 번들 사이즈와 타입스크립트 지향적이라고 소개하고있다.
매우 작은 크기로 돌아가고 가볍게 사용하기 좋기 때문에 부담없이 사용 가능하다.
React.js, Next.js, React Native 에서 사용가능하다.

실제로 우리도 타입스크립트 지향적이고 최근에 나온 상태관리라 선정을 했다 !

다만 next.js 버전이 14가 되었는데 jotai ver2와 충돌이 나는것같아서 next 버전을 13으로 다운그레이드 하고 진행하고 있다.

jotai 사용법

내가 사용하면서 느꼈던것은 jotai는 useState와 상당히 비슷함을 느꼈다.
아무래도 상태관리라 그런가 , 그리고 굉장히 편리하고 쉬웠다.

1. atom -> atom 을 생성하고 괄호 안에 초기값을 넣을 수 있다.

const priceAtom = atom(10000);

2. useAtom(read/write)

const [price, setPrice] = useAtom(priceAtom)
이게 바로 내가 말했던 useState와 비슷하게 쓰이는것

3. useSetAtom(write) -> 생성된 값을 업데이트 할 때만 사용

const setPrice = useSetAtom(priceAtom);

4. useAtomValue(read) -> 생성된 atom 의 값을 read 만 할 때 사용한다.

const price = useAtomValue(priceAtom);

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

내가 사용했던 방법

약관 동의 체크박스를 구현하면서 각각 체크된 것의 상태를 관리 했어야했다.
store의 파일을 생성해서 그 안에 jotai를 관리하기로 했다.

import { useAtom } from 'jotai';

일단 import를 해준다

나는 useState와 비슷한것을 사용할 것이기 때문에
useAtom을 불러온다.

import { useAtom } from 'jotai';
import { essential } from '@/stores/condition';
import { allchecked } from '@/stores/condition';
import { option } from '@/stores/condition';

사용 할 때 이렇게 useAtom 을 사용해서 이용하면 된다 !

const [marketing, setMarketing] = useAtom(option);
const [allAgreed, setAllAgreed] = useAtom(allchecked);
const [service, setService] = useAtom(essential);

jotai 콘솔에 확인하는 법 !!

잘 저장이 되어서 값이 바뀌는지 확인하는 방법은

useEffect(() => {
    console.log('marketing: '+marketing);
    console.log('allAgreed: '+allAgreed);
    console.log('service: '+service);
}, [marketing, allAgreed, service]);

이런 방식으로 하면 , 나는 타입을 boolan으로 했어서

    true / false

둘중의 하나로 잘 찍히는것을 볼 수 있다 !!