React - Recoil

ref

https://recoiljs.org/ko/docs/introduction/getting-started/

intro

Redux...
아무리 작은 단위의 '것'이라도 그룹을 나누고 저장소만들고 액션을 만들고 불러오고...
귀찮은것들이 참 많다. 그나마 redux tool kit으로 넘어간뒤로 보일러플레이트는 많이 줄긴했지만
Redux saga 등을 같이 사용하다보면 그래도 넘나 귀찮은것.

때때로 너무나도 간단한 변수를 글로벌하게 관리해야할때조차 redux의 규칙에 맞춰 사용해야하니 귀찮음이 이만저만이 아니다.

넘나 작지만 소중한 무엇인가를 글로벌하게 사용하고 싶을때 Recoil은 좋은 대안이 될수있다.

관습

atoms라는 폴더를 만들어서 그안에 userinfoAtom.ts, toggleAtom.ts등등
redux의 store같은것을 만들고 외부에서 해당 위치의 것들을 import하여 사용한다.

src/atom/userAtom.ts

import { atom } from 'recoil'

export const userState = atom<string>({
  key: 'userState',
  default: "",
})

이렇게 저장소를 만들고 어디선가 사용할때 불러와서 사용하면된다
default라는것이 초기값이다.

사용법

useRecoilState, useRecoilValue, useSetRecoilState 요로케 3가지 정도를 제일 자주쓰는데

useRecoilState

React.useState와 사용법이 거의 똑같다.

import { userState } from "atom/userAtom"
const [userId, setUserId] = useRecoilState(userState)
// useState와 사용법은 동일하다.

useRecoilValue

값을 불러와서 사용만 하고싶을때 사용한다.
(useSelector와 비슷한 기능)

import { userState } from "atom/userAtom"
const userId = useRecoilValue(userState)
console.log(userId) // userId의 값을 불러와서 사용할 수 있다.

useSetRecoilState

값을 재할당하고 싶을때 사용한다.
(useDispatch와 비슷한 기능)

import { userState } from "atom/userAtom"
const setUserId = useSetRecoilState(userState)
setUserId("20200201") // userId의 값을 "20200201" 으로 저장하였다.

그런데...

Redux dev tools의 개발경험이 너무 뛰어나서 완전히 대체는 불가능할듯 싶다.
렌더링관련 이슈가 생겼을때,
수많은 컴포넌트들 사이에서 어떤 타이밍에 어떤 변수가 문제를 일으켰는지 확인할때,
어느 타이밍에 어떤 공간에 어떤일이 일어났는지 정확히 집어주는 이 경험들은
진짜 유용하기 때문에 이것을 완전히 대체할 수 없다.

그래서?

중요도가 낮지만 글로벌하게 관리는 해야할때
또는 좀 구분해서 간단하게 사용하고싶을때 사용하던가
작은 프로젝트에서는 적극 도입하여 사용해도 괜찮을듯 싶다.