Recoil Basic

1. React 내장 기능의 한계

호환성과 단순함의 측면에서 React 내장 기능은 useState Hook과, Context API를 가급적 이용하는 것이 좋겠지만 다음과 같은 문제점이 있습니다.

- Context API

• 단일값만 저장할 수 있다. 여러값들의 집합을 만들 수 없다.
• 여러 Context를 사용할 경우 최상단 컴포넌트(App.tsx, index.tsx)에 계속 Provider로 감싸 주어야 한다.

- useState

• 상태값을 공유하기 위해서는 상위 컴포넌트로 값을 끌어올려야 한다.
• 상태값을 하위 컴포넌트의 props 계속 전달할 경우(props drilling),
  상태값을 사용하지 않고 값만 전달하는 하위 컴포넌트에 불필요한 렌더링이 발생할 수 있다.

Recoil은 이러한 문제를 개선합니다.

2. Recoil의 특징

• 새로운 React의 기능과 호환이 된다.
• 상태 정의에 대한 코드 분할이 가능하다.

3. Recoil 설치

Recoil은 타입스크립트를 지원하기 때문에 따로 타입 라이브러리(@type/) 설치가 필요없습니다.

npm install recoil

4. 기본 설정

최상단 컴포넌트에 RecoilRoot 컴포넌트로 감싸주면 됩니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { GlobalStyle } from './components/common/Style';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const queryCilent = new QueryClient({
  defaultOptions : {
    queries : {
      refetchOnMount : true
    }
  }
});

root.render(
  <React.StrictMode>
    <GlobalStyle/>
      <RecoilRoot>
        <QueryClientProvider client={queryCilent}>
          <App />
        </QueryClientProvider>
      </RecoilRoot>    
  </React.StrictMode>
);

5. atom 정의

Redux와는 다르게 Recoil은 프로젝트 내부에 임의의 경로에 atom(작은 단위의 상태)을 설정할 수 있습니다.

저는 store 폴더에 store.ts 파일을 작성하였습니다.

import {atom} from 'recoil';

export const appTestEnrollState= atom<string>({
    key : 'appTestEnroll',
    default : ''
})