[Recoil] 전역상태관리! 최소기본

첫 프로젝트를 진행했을때 이런 생각을 했다. 간단한 페이지니깐 상태관리는 리액트 'useState'로도 충분하겠지 생각하고 추가적인 상태관리 라이브러리를 사용하지 않았지만 프로젝트를 진행하면서 후회하기 시작했고, 다음 프로젝트때는 꼭 상태관리 라이브러리르 쓰자라고 다짐해고 다짐했다. 정말 props drilling때문에 고생을 많이 했다.

Recoil을 선택한 이유

먼저 기존에 잘쓰는 상태관리 라이브러리가 있는건아니었고, Redux와 Recoil중에서 Recoil을 선택했다. 이유는 Recoil이 React전용 상태관리 라이브러리라고하고 쉽다는 말을 들어서 선택하게 됬다. 그리고 프로젝트에서 상태관리라이브러리를 심도있게 사용하기보다는 전역상태를 손쉽게 관리하자는게 주된 목표였기때문에 여러기능을 필요로 하진 않았다.

전역 상태관리! 기본기능만 딱!

1. 먼저 최상위 컴포넌트에 RecoilRoot로 감싼다.

이러면 하위 컴포넌트에서 Recoil을 통한 상태관리가 가능해진다.

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

ReactDOM.render(
  <React.StrictMode>
    <Global styles={reset} />
    <RecoilRoot> // App component를 RecoilRoot로 감싼다.
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
);

2. 전역 상태를 관리할 파일을 만든다

예) Atom.ts 를 만들어 Recoil을 통한 전역상태관리를 한다.
이때 atom keyword를 통해 상태를 만든다.

import { atom } from 'recoil';

// 전역상태를 만든고, export 해준다.
export const isLogin = atom({
  key: 'isLogin',
  default: false,
});

3. 전역상태를 import해와서 사용한다.

사용방법은 React useState와 유사하다.

//Component.tsx , App component의 하위 component
import { useSetRecoilState } from 'recoil';
import { isLogin } from './Atom'

export function Component () {
const [isLogin, setIsLogin] = useRecoilState(isLogin)
// useState와 같은 방법으로 사용하며, setState를 사용했을때, Atom.ts의 상태가 변하게 된다.

// useRecoilState대신 useSetRecoilState를 사용하면 상태 업데이트만 가능한다.
const setIsLogin = useSetRecoilState(isLogin)

// useRecoilValue를 쓰면 전역상태의 값만 가져다 사용할 수 있다.
const isLogin = useSetRecoilState(isLogin)

return (
    <>
      {isLogin? <div>안녕하세요</div> : <div>안녕하세요</div>}
    </>
  ) 
}