[Recoil] 전역 상태 관리가 이렇게 간단해? (feat. Atom, Selector)

 

 

Atoms

react useState hook을 알고 있다면, Atom의 개념은 어렵지 않다.

recoil을 설치한 후 가장 처음 해야 할 일은, 전역 변수를 사용할 컴포넌트를 <RecoilRoot />로 감싸주어야 한다.

  <RecoilRoot>
      <React.StrictMode>
        <App />
      </React.StrictMode>
  </RecoilRoot>

atom()에 고유한 key를 주고 기본값을 default에 넣어서 할당해 주면 끗! 👍🏻

import { atom } from "recoil";

export const DarkModeAtom = atom({
  key: "darkModeAtom",
  default: true,
});

이렇게 생성된 전역 변수를 어디에서든 사용할 수 있다.

 

useRecoilState hook을 통해 useState와 비슷한 형태의 녀석을 가져올 수 있다.

const [isDarkMode, setIsDarkMode] = useRecoilState(DarkModeAtom);

 

이렇게 값만 들고 올 수도 있고,

const isDarkMode = useRecoilValue(DarkModeAtom);

setter함수만 들고 올 수도 있다.

const setIsDarkMode = useSetRecoilState(todoListState);

상태의 값을 기본값으로 재설정하는 함수를 반환할 수도 있다.

const setIsDarkMode = useResetRecoilState(todoListState);

 

 

 

 

 

 

Selectors

Selector는 Atom의 파생된 상태의 일부로, 순수 함수이다.

Atom이 하지 못하는 두 가지 기능을 Selector가 가지고 있다.

1.  이미 선언된 Atom이 값이 변경되면, Atom을 구독하고 있던 selector에 할당된 함수가 실행된다.
2.  서버와 통신해서 받아온 response data값을 global 상태의 값으로 가질 수 있다.

Selector 사용법은 아래와 같다.

const Selector = selector({
	key: '키값',
	get: ({ get }) => {
		const 원본 = get(아톰)
		return 원본변형값
		}
})

예제코드)

export const TotalQuantitySelector = selector({
  key: 'todoListStatsState',
  get: ({get}) => {
    const CartItem = get(CartItemAtom);
    return CartItem.length;
  },
});

export const TotalPriceSelector = selector({
  key: 'TotalPriceSelector',
  get: ({get}) => {
    const CartItem = get(CartItemAtom);
    return CartItem.reduce((누적값, 현재값) =>누적값 + 현재값, 0)
  },
});

 

Atom처럼 key값을 가지고 있는데, 모든 Atom과 Selector를 포함해서 유니크한 값이어야 한다.

get은 함수가 할당되어질 수 있는 프로퍼티다.

구독하고 있는 Atom의 값이 setRecoilState에 의해 수정될 때마다, get에 할당된 함수가 재실행된다.

이는 서버로부터 데이터를 받아오는 로직을 재실행하고 데이터를 가공한후 값을 뱉어낼 수 있음을 뜻한다.