React Jotai 사용법 총 정리(2) - atom 이해 및 기본 유용한 기능

React Jotai 사용법 총 정리(1) - Jotai는 무엇이고 어떻게 사용하나요? ( https://liebe97.tistory.com/49 )
React Jotai 사용법 총 정리(2) - atom 이해 및 기본 유용한 기능 ( https://liebe97.tistory.com/51 )
React Jotai 사용법 총 정리(3) - useAtom & provider 사용법 ( https://liebe97.tistory.com/52 )

 

Jotai 저번 포스팅에 이어 기본적으로 사용하는 atom 에 대한 이해와 유용한 기능에 대해 포스팅하려고 한다.

 

atom

useAtom 을 사용하려면 처음에 atom 을 생성해야한다. 

 

 initialValue  - 초기값 설정하기

const priceAtom = atom(10)

atom 생성 시 괄호 안에 값을 넣으면 초기값으로 세팅된다.

 

 read  - 읽기 호출

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

get 파라미터를 이용하여 다른 atom 을 참조하여 값을 세팅할 경우 위와 같이 사용할 수 있다.

 

 write  - 쓰기 호출

// 쓰기만 사용할 경우
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)
  }
)

 

atom 쓰기, 읽기를 실제 사용 예시로 보면 이해가 더 빠르다.

 

atom 편리한 기능

 

 useMemo(() => atom(), [])  - 컴포넌트 내에서 아톰 생성하기

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

return (
  ...
)
}

 

 onMount()  - onMount, onUnMount 제어

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