Recoil

💡 Recoil는 React를 위한 상태 관리 라이브러리다.

설치

---

$ npm install recoil

Root

---

전역으로 사용하기 때문에 루트 컴포넌트에 넣어주는 것이 좋다.

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atom

---

선언

atom은 리코일을 활용한 state(상태) 단위이다.

컴포넌트에서 atom을 사용하면 암묵적으로 atom을 구독하게 된다.

또 atom의 값이 변경되면 구독중인 컴포넌트들은 리렌더링 된다.

import {atom} from 'recoil';

export default atom({
	key:'UniQue', //유니크한 이름
	default: 0, //초기값
})

• atom을 선언하려면 recoil에서 import해야한다.
• key값은 atom을 식별하는 고유한 문자열이기 때문에 유니크 해야한다.
• default값은 atom의 초기값이다.

호출

import { useRecoilState } from 'recoil'; 
const [unique, setUnique] = useRecoilState(UniQue);

선언한 atom를 호출하려면 recoil에서 제공하는 useRecoilState라는 hook을 사용해야 한다.

useState 처럼 state와 setState를 선언한다. useRecoilState 인자로 선언한 atom을 넣어준다.

setUnique를 통해 unique의 값을 업데이트 하면 atom으로 선언한 state의 default값이 바뀐다.

Selector

---

selector는 atom에서 할 수 없는 비동기 처리가 가능하다.

이미 선언된 atom의 값이 변하면 구독중이던 selector의 함수도 다시 실행된다.

import { DefaultValue, selector } from "recoil";
import countState from "../atom/countState"; //atom

export default selector({
    key: "countSelector",
    get: ({get}) => {
        const amount = get(amountState);
        return amount + 1;
    },
    set: ({ set }, newAmount) => { //newAmount: get의 return값
        return set(amountState, newAmount + 1); //첫번째 인자 set할 state, 두번째 인자 set할 값
    }
});

get

• get으로 atom을 구독하고 atom의 값이 변경되면 get에 할당된 함수가 재실행 된다.

set

• set은 인자를 2개 받는데 첫번째는 업데이트할 state, 두번째는 업데이트할 값이다.
• atom을 get(구독)하지 하지않으면 set을 사용할 수 없다.
• set이 없으면 setState가 불가능하다.
• selector를 업데이트 하면 set의 함수가 실행 된다.
• newAmount는 get의 return값이다.

마치며

아직 이론만 공부하고 실제로 사용해보진 않아서 정확히는 모르겠지만 상위 컴포넌트의 값을 하위 컴포넌트에서 변경하려면 props&state로 전달해야 하는데 props를 여러번 해야 한다면 코드도 지저분해질 것이다. 하지만 recoil을 사용하면 그럴 걱정이 없는 것 같다.
곧 사용할 예정인데 빨리 익혀보고싶다.