[React] Recoil

📝 Recoil 공식 문서
https://recoiljs.org/ko/

이번 최종 프로젝트에서 상태관리를 recoil로 작업하려고 해서 recoil이 뭔지 어떻게 쓰는지 공식 문서와 ChatGPT를 이용해서 알아보았다.

atom

atom의 형태 : atom({key: string, default: atom})

atom은 Recoil에서 가장 기본이 되는 상태를 정의하는 훅이다.
이는 컴포넌트 간에 공유되는 상태를 생성하며, 상태의 초기값을 default 속성으로 설정할 수 있다.

const counterState = atom({
	key : 'counterState', // 고유 키
  	default : 0, // 초기 값
})

selector

selector의 형태 : selector({key: string, get: ({get}) => any})

selector는 다른 Recoil 상태들을 기반으로 새로운 값을 계산할 때 사용된다.
이를 통해 파생된 상태를 만들 수 있다.
여기서 파생된 상태란 다른 상태를 기반으로 계산되는 상태를 말한다.

atom과 key를 갖는다는건 동일하지만 default대신 get을 사용한다.

const doubledCounterState = selector({
  key: 'doubledCounterState',
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2;
  },
});

useRecoilState

atom의 상태를 읽고 쓰기 위해 사용된다.
반환 값은 배열이며 첫번째 요소는 현재 상태 값, 두번째 요소는 상태 값을 업데이트하는 함수이다.
마치 useState와 유사한 형태이다.

const [count, setCount] = useRecoilState(counterState);

useRecoilValue

atom 또는 selector의 현재 값을 읽기 위해 사용된다.
이는 읽기 전용으로 상태 값을 업데이트할 수 없다.

const doubledCount = useRecoilValue(doubledCounterState);