Recoil Start

정인아·2022년 5월 12일
0

Recoil

목록 보기
1/1
post-thumbnail

현재 회사에서 상태 관리 라이브러리로 Redux를 사용 중입니다.
회사에서 프로젝트를 진행하면서 가장 많이 들었던 생각은 설정 할 것이 너무 많다는 것이었습니다.
물론 겨우 이런 이유로 recoil 공부를 시작한건 아니었습니다.

redux 라이브러리 사용시, 비동기 처리를 하기 위해, redux saga, redux Thunk 미들웨어를 추가로 설치하고 사용해야합니다.

하지만, recoil은 이 부분이 포함되어 있어 추가 라이브러리 없이 사용 할 수 있어서 공부하기 시작했습니다.

(사실 사용성에 있어서 redux보다는 recoil이 react에서 hook을 사용하는 법과 유사하여 좀 더 react에 친화적으로 쓸 수 있겠지하는 마음도 있었습니다...ㅎㅎ)

Recoil

recoil은 전역 상태를 아토믹하게 관리하고 컴포넌트에서는 이 Atom을 구독하는 형식으로 이루어집니다.

기본 사용법

  • 설치

npm으로 설치 하면된다. (너무 간단...)

npm i recoil

  • provider

컴포넌트가 atom을 구독하기 위해서 모든 컴포넌트가 RecoilRoot의 자식으로 관리 되어야합니다. 즉, App.js 혹은 index.js에서 RecoilRoot로 감싸줍니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';


ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

  • atom.js

위에서 언급한 전역 상태를 아토믹하게 관리하기 위해 Atom을 설정 해줘야한다. 필자는 react 프로젝트에서 atom.js (or atom.ts)를 만들어 설정 해줬다.

atom.js

import { atom } from "recoil";

export const isDark = atom({
   	key: "darkMode",
	default: false
})

atom을 recoil로부터 import 하고 위의 코드 처럼 설정한다.
atom은 디버깅, 지속성 그리고 여러 atom들의 map을 볼 수 있게하는 특정 고급 API에 사용될 수 있게 유니크한 key값이 필요하다.
즉, 다른 atom과 겹치기 않게 유니크한 key값을 설정해준다.

default는 상태의 초기값으로 설정 해준다.


  • atom 불러오기

위에서 언급 했듯이, 특정 컴포넌트는 atom을 구독하기 위해 useRecoilValue를 사용한다.

import { useRecoilValue } from "recoil";
import { isDark } from "./atom";

const darkMode = useRecoilValue(isDark); // false

  • atom update

atom의 상태를 update 하기 위해서는 useSetRecoilState를 사용한다.

import { toDoState } from "../atoms";
import { useSetRecoilState } from "recoil";


const setToDos = useSetRecoilState(toDoState);
setToDos( prev => newData);

이렇게 위와 같이 atom을 구독 하면서 값을 들고오고, 값을 업데이트 시키는 방법을 알아봤지만, 이 정도만 봤을 때, useState와 굉장히 유사한 부분이 많이 보입니다. 페이스북에서 recoil을 만든 팀도 그렇게 생각했는지, 해당 부분을 useState처럼 사용 할 수 있게 만들어 놨습니다.

  • useRecoilState
 import { toDoState } from "../atoms";
 import { useRecoilState } from "recoil";

 const [ toDos, setToDos ] = useRecoilState(toDoState);

toDos와 setToDos는 위에서 언급한것처럼, atom 값을 불러오고, 업데이트 시킬 수 있습니다.


  • selector

공식 문서에서 selector는 함수 또는 파생된 상태라고 표현한다.

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})

위의 예제는 공식문서의 예시를 그대로 들어왔다.

하나씩 설명을 해보자면,

key: atom을 식별하기 위한 고유한 id 값.
get: 다른 atom이나 selector로부터 값을 찾아 return 하는 곳이다.
set: state값을 변경 할 수 있는 함수를 return 하는 곳이다. 여기서 주의해야하는 부분은, 자기 자신 selector를 set 하려면, 스스로 해당 set function에서ㅏ set하는 것이므로 무한루프를 가지게 된다. 때문에 반드시 다른 selector와 atom을 set하는 로직을 구성하여야한다.

간단하게 set과 get의 차이를 말하자면,

get 가져오고 싶은 atom의 값을 가져올수 있다. 
(가져만 온다. 가져와서 원하는 연산을 한 후 return)

set state의 초기값을 바꿀수 있다. 
(원하는 연산후 set을 통해 초기값 교체)

다음 게시글에는
get과 set에 대해서 좀더 자세히 다뤄 볼까합니다.

profile
프론트엔드 개발자

0개의 댓글