recoil

📋 recoil

페이스북에서 출시한 리액트를 위한 전역 상태 관리 라이브러리
다른 전역 상태 라이브러리에 비해 설정, 사용이 편리하며 리액트 문법과 매우 유사하다.

사용법

설치

npm install recoil

RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리에 ReocilRoot를 필수적으로 사용해야 한다.
공식 문서에 따르면 루트 컴포넌트에 넣어주는 것이 가장 좋다고 한다.

• index.tsx

root.render(
  <RecoilRoot>
  	<App />
  </RecoilRoot>
);

Atom

-Atom은 상태의 일부를 나타낸다.

• Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
• atom의 값을 읽는 컴포넌트는 암묵적으로 atom을 구독하기 때문에 atom에 변화가 있으면 해당 atom을 구독하는 모든 컴포넌트가 재 렌더링 된다.

atom function

atom()은 쓰기 가능한 state를 나타내는 atom을 만든다.

두개의 인자 필요로 하는데 인자값은 아래와 같다.

첫 번째 인자 : 유일한 이름의 키 값
두 번째 인자 : 기본값

import { atom } from "recoil"

export const isDarkAtom = atom({
    key : "isDark",	// 저장할 state 상태
    default : false	// state의 기본 값
})

useRecoilValue

주어진 reocil 상태의 값을 리턴한다.

useRecoilValue는 읽기 전용 상태와 쓰기 가능 상태에서 모두 동작하므로 컴포넌트가 상태를 읽을 수만 있게 하고 싶을 때에 추천하는 hook이다.

import { useRecoilValue } from 'recoil';

const isDark = useRecoilValue(isDarkAtom);	// false

useSetRecoilState

쓰기 가능한 recoil 상태의 값을 업데이트 하기 위한 setter 함수를 리턴한다.

useSetRecoilState는 상태를 읽지 않고 쓰기만 하고자 할 때 사용하는 것을 추천하는 hook이다.

const setTheme = useSetRecoilState(isDarkAtom);

// 테마 변경 함수
const handleTheme = () => {
  setTheme((prevState) => !prevState);
}

참고

노마드코더
recoil 공식문서
useRecoilValue 공식문서
useSetRecoilState 공식문서