React Jotai 사용법 총 정리(3) - useAtom & provider 사용법

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 )

 

이번 포스팅에서는 useAtom 과 provider 사용 방법에 대해 다뤄보고자 한다.

 

1. useAtom

총 정리 1편에서 설명했듯이 useAtom 은 useState 와 동일한 모양으로 사용 가능하다.

const [price, setPrice] = useAtom(priceAtom)

 

2. useSetAtom (write) / useAtomValue(read)

const setPrice = useSetAtom(priceAtom); // 쓰기만
const price = useAtomValue(priceAtom); // 읽기만

낮은 버전에서는 useSetAtom 이 아닌 useUpdateAtom 으로 쓰인다.

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

 

3. provider

provider 에 대해 공홈에 제대로 설명해주지는 않아서...ㅎㅎ

사용법 숙지를 위해 여기 저기 보던 중 발견했던 이미지이다. (출처를 모르겠다...)

 

provider 는 기본적으로 atom 을 전역으로 쓸 때, 어디까지 저장하여 사용할 지 범위를 지정한다고 생각하면 좋을 것 같다.

 

 

코드를 보면 scope 가 있는 atom 은 부모와 자식간 값이 동일하게 변하는 것을 확인할 수 있다.

provider 를 사용할 때 scope 라는 것을 부여해주면, 같은 scope 를 가진 atom 끼리는 값이 유지된다.

 

개인적으로 provider 를 여러 방법으로 설계해보고 사용하길 권장한다!

(scope 는 Jotai 2에서 사라지게 된다... 대신 store로 대체!)

예 1) A 컴포넌트, B 컴포넌트에서 같은 atom 을 사용하지만 다른 값을 가지게 하고 싶을 때
예 2) A 컴포넌트에는 atom 값을 유지시켜주지만, B 컴포넌트에서는 atom 값을 유지하고 싶지 않을 때

등등...