React Jotai 사용법 총 정리(1) - Jotai는 무엇이고 어떻게 사용하나요?

 

React Jotai 사용법 총 정리(2) - atom 이해 및 기본 유용한 기능 ( https://liebe97.tistory.com/51 )
React Jotai 사용법 총 정리(3) - useAtom & provider 사용법 ( https://liebe97.tistory.com/52 )

 

앞으로 프로젝트 리팩토링을 위해 공부하면서 겸사겸사... Jotai의 A-z까지 포스팅해보려고 한다.

 

Jotai 는 "React State Management Library" 중 하나이고,

흔히 우리가 아는 Recoil, Redux 와 같이 상태 관리에 필요한 편의 기능을 제공하는 라이브러리이다.

 

Jotai 는 어떤 특징이 있나요?

공식 홈페이지에서 매우 작은 3kb의 번들 사이즈와 타입스크립트 지향적이라고 소개하고있다.

매우 작은 크기로 돌아가고 가볍게 사용하기 좋기 때문에 부담없이 사용 가능하다.

React.js, Next.js, React Native 에서 사용가능하다.

 

실제로 사용했을 때 Jotai 에서 제공하는 여러 기능, re-rendering 문제를 해결한 점 등이 좋았고

개인적인 의견이지만 단점으로는 공홈에서 소개하는 Jotai 메뉴얼이 조금 불친절했다고 느꼈다.

 

(공홈을 참고하면서 작업을 하지만) 아 이점을 불편한데? 라고 생각이 들 때 한참 검색하고 뒤적거리다가 개발 끝나고

나중에서야 발견하게 되는... 제가 잘 못찾은 것 같기도 ㅎㅎ..

 

Jotai를 어디에서 사용하고 있나요?

- 더핑크퐁컴퍼니 https://medium.com/pinkfong/jotai는-조-타이-라고-읽습니다-6498535abe11

- 카카오 지그재그 https://devblog.kakaostyle.com/ko/2022-01-13-2-jotai-recipe/

 

참고용으로 시작하기 전에 보면 좋다(필자도 이 두 블로그에서 많은 도움을 받았다)

 

Jotai 기본 사용법

기본적으로 Jotai 는  React 내의 state, useState 와 유사한 모양이기 때문에 쉽게 입문할 수 있다.

전역 관리 atom 을 생성하고, 생성된 atom 을 컴포넌트 내에 불러와 사용한다고 생각하면 된다.

 

 

예시를 보면 atom, useAtom, useSetAtom, useAtomValue 가 있다.

 

1. atom

const priceAtom = atom(10000);

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

 

2. useAtom(read/write)

const [price, setPrice] = useAtom(priceAtom)

생성된 atom 을 불러와서 useState 와 동일하게 사용 가능하다.

 

3. useSetAtom(write)

const setPrice = useSetAtom(priceAtom);

생성된 atom 의 값을 update 만 할 때 사용한다.

 

4. useAtomValue(read)

const price = useAtomValue(priceAtom);

생성된 atom 의 값을 read 만 할 때 사용한다.

 

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