TIL 31. Recoil 설치 및 사용방법

Recoil

Recoil은 Redux랑 같은 개념인데 코딩할때도 코드의 양도 줄고 간편하고 쉽게 상태관리를 할 수 있다는 장점이 있다!!

설치

npm 설치

npm install recoil

yarn 설치

yarn add recoil

Recoil Root

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

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

Atom

Recoil에는 Atom이라는게 있는데 아톰이란 ?!

상태를 나눠서 여기저기 사용할 수 있다 🔥
상태를 읽는 구성요소는 등록되어있기 때문에 업데이트를 하면 아톰에 등록되있는 구성을 다시 렌더링 한다 !!

이렇게 최상위 컴포넌트에 export해서 필요한 컴포넌트에 바로 가져가서 사용할 수 있다 👍👍

전체적인 코드를 보자면

atom과 useRecoilState를 import해주고 저 상태값을

const [data, setData] = useRecoilState(compareState) 를 사용하면된다 !

우리가 react를 쓰면 사용했던 hooks인 useState는 여기서 useRecoilState이다!!