[React] Recoil

Recoil은 2020년에 Facebook에서 발표하였으며, React의 상태관리를 지원하는 유일한 상태 관리 라이브러리이다

 

redux toolkit만 사용하다가 새로운 프로젝트를 들어가며 새로운 상태 관리 라이브러리를 써보자 했다가 알아보았는데 사용법은 굉장히 간단한듯하다

 

요즘 블로그들을 보면 recoil을 사용하는 사람들이 어느정도 많이 있는것을 볼수 있는데 이는,

 

• 단순한 사용방법
• React를 만든 Facebook에서 직접 만든 것이라 호환성이 좋다 

 

 

정도로 볼 수 있을 것 같다

 

 

먼저, recoil을 사용하려면

 

//npm

npm install recoil

 

로 설치를 해준다

 

 

 

Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 <RecoilRoot> 컴포넌트를 사용해야한다.

따라서, index.js 에 다음과 같이 추가를 해준다

 

import {
  RecoilRoot,
} from 'recoil';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);

 

 

그 다음 상태를 설정하면 되는데, 이 때 나오는 개념이 atom이다

 

 

Atom은 상태(state)의 일부를 나타낸다

초보자인 내 입장에선 쉽게 그냥 state와 똑같다고 이해하였다 

 

Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트가 재 렌더링 되는 결과가 발생할 것이다.

 

 

공식문서의 예제로는

 

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

 

 

위와 같이 나와 있는데 나는 간단한 카운터를 만들어 이를 쉽게 이해하였다

 

 

import { atom } from "recoil";

const scount = atom({
    key: 'count',
    default: 0
})

 

 

이와 같이 정의를 해주었다

위와 같이 정의를 한 atom 을 컴포넌트에서 가져다 쓰려면 useRecoilState를 사용해야한다

 

 

기존 usestate 이용한대로

 

const [count, setCount] = useRecoilState(scount);

 

 

위와 같이 선언해주면 된다

 

 

내가 만든 간단한 카운터 예제는 아래와 같다

 

 

import { atom, useRecoilState } from "recoil";

const scount = atom({
    key: 'count',
    default: 0
})

function Detail() {

    return (
        <>
            <div>
                <h1>recoil test</h1>

                <Counter ></Counter>
                <Display></Display>
            </div>
        </>
    )
}


function Counter() {

    const [count, setCount] = useRecoilState(scount);

    return (
        <>
            <div>
                <button onClick={() => { setCount(count + 1) }}>+</button>
                {count}
            </div>
        </>
    )
}

function Display() {
    const [count, setCount] = useRecoilState(scount);

    return (
        <>
            <div>
                {count}
            </div>
        </>
    )
}

 

 

Display와  Counter 컴포넌트를 따로 만들어 atom을 사용할 상황을 만든 뒤 이용하였다