React Jotai 사용법 총

Jotai 지난 포스트에 이어 Atom에 대한 기본적인 이해와 유용한 기능에 대해 글을 쓰고자 합니다.

https://liebe97.49

Jotai 사용법 요약 – Jotai는 무엇이며 어떻게 사용합니까? (하나)

앞으로 프로젝트 리팩토링 공부하면서 Jotais Az까지 포스팅하도록 노력하겠습니다. Jotai는 “React State Management Libraries” 중 하나이며 Recoil 및 Redux와 같은 상태 관리에 널리 사용됩니다.

love97.tistory.com

원자

useAtom을 사용하려면 먼저 Atom을 생성해야 합니다.

원래 값 – 초기값 설정

const priceAtom = atom(10)

아톰 생성 시 값을 괄호로 묶으면 해당 값이 초기값으로 설정됩니다.

읽다 – 통화 읽기

const readOnlyAtom = atom((get) => get(priceAtom) * 2)

get 파라미터로 다른 atom을 참조하여 값을 설정하면 위와 같이 사용할 수 있다.

쓰다 – 전화 쓰기

// 쓰기만 사용할 경우
const writeOnlyAtom = atom(
  null,
  (get, set, update) => {
    set(priceAtom, get(priceAtom) - update.discount)
  }
)

// 읽기도 사용할 경우
const readWriteAtom = atom(
  (get) => get(priceAtom) * 2, // 다른 atom 참조를 안할 경우 값만 써도 됨
  (get, set, newPrice) => {
    set(priceAtom, newPrice / 2)
  }
)

실제 사용 사례로 아톰을 쓰고 읽는 것을 보면 이해하기 쉽습니다.

아톰 편리한 기능

useMemo(() => 원자(), ()) – 구성 요소 내부에 원자 생성

const App = ({ data } : { data : { id: number } }) => {
  // useMemo 로 컴포넌트 내에서 atom 선언을 할 수 있다.
  const exampleAtom = useMemo(() => atom(data), (data));
  const example = useAtomValue(exampleAtom);
  console.log(example);

return (
  ...
)
}

온마운트() – onMount, onUnMount 컨트롤

const countAtom = atom(1);
countAtom.onMount = (setAtom) => {
 // mount 됐을 때 세팅
  setAtom(prev => prev + 1)
  
  return () => {
    // unmount 됐을 때 세팅
    setAtom(1);
  }
};