계기

현재 듣고있는 새싹에서 react를 바탕으로 프로젝트를 진행중인데 하다보니 전역상태관리가 필요해진 상황이었다. 새로운 기능을 공부하기에 가장 좋은시기는 해당기능이 필요한 시기라고 생각하여 시작한 recoil

Why Recoil?

react 내부에서 제공되는 context가 있긴하지만 다른 기능을 활용해보고 싶어 알게된 redux와 recoil. redux가 먼저 나온만큼 유저풀도 많고 자료도 많았지만 적용하는데 배울게 너무 많은 느낌이었다. 그에 비해 recoil은 비교적 간단해 보여 recoil을 선택하였다.

주요개념

recoil은 state를 atom(공유상태)에 저장시켜 selector(순수함수)를 통해 내려받아 사용한다.

설치

npm 사용시

npm install recoil

yarn 사용시

yarn add recoil

사용해보기

recoil을 적용하려면 앞에서말한 atom, selector를 만들어야한다.

atom

export const theme = atom({
  key: "theme",
  default: false,
});

이런식으로 상태를 저장할 atom을 만들어준다. key값은 다른 atom과 구분해주기 위하여 고유한 값이어야하고 default는 기본적으로 atom에 들어있는 값이다.

selector

export const getTheme = selector({
  key: "getTheme",
  get: ({ get }) => {
    const darkTheme = get(theme);
    return darkTheme;
  },
});

selector역시 마찬가지로 key값이 있으며 get함수를 통해서 atom에 저장된값을 가져올 수 있다.

atom과 selector를 만들면 준비는 끝났다 이제 활용을 해보자

atom에 값을 저장하기 위해서는useRecoilState를 활용하여 저장한다.

import { theme } from "../../../recoil/atom";
import { useRecoilState,useRecoilValue } from "recoil";

const [themeMode, setThemeMode] = useRecoilState(theme);

setThemeMode(true) ///atom 상태 변경

기존에 useState를 사용하는것과 매우 비슷한 방식이다 초기값에 atom을 넣어주고 값을 변경할때 useState처럼 setThemeMode를 활용하여 변경해주면 된다.

저장된 값을 가져올 때는 useRecoilValue를 활용하면된다.

const darkTheme = useRecoilValue(getTheme);

이런식으로 useRecoilValue에 만들어놓은 selector를 넣음으로써 state값을 전역으로 활용할 수 있게 된다.

느낀 점

처음 recoil을 접하고 활용하면서 느낀 점은 정말 react스럽다는 것이었다. useState의 방식을 거의 그대로 활용하는 느낌이었다. recoil의 기능을 전부 쓰지는 않았지만 러닝커브가 매우 낮게 느껴졌다. 먼저 적용해보고 다른 분들에게 활용 방법을 알려 드렸는데 그 분들도 바로바로 적용하는거보면 정말 사용하기 좋은거같다.