[React] 상태관리도구 Recoil

Recoil이란?

• state management할 수 있는 라이브러리

state management가 무엇일까 ?

• recoil redux같은 library사용하기
• props로 내려가는 계층구조 대신에, 바로 접근할 수 있다.

Recoil을 사용하면 장점은?

특정 컴포넌트에 종속되지 않는다.

오직 value가 필요한 component만 그 value를 가진다.

컴포넌트에서 value에 접근하려면?

component를 가진 atom에 연결하자~~

recoil 설치

yarn add recoil 를 이용하여 Recoil설치해주자

 

/index.ts

import React from 'react';
import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider } from 'react-query';
import ReactDOM from 'react-dom/client';

import { RecoilRoot } from 'recoil';

import App from './App';

const queryClient = new QueryClient();
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

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

index.ts파일에서 RecoilRoot로 감싸주자!

 

이후, atom을 생성하고 사용할 컴포넌트에서 해당 값을 사용하려면

/atoms.ts 
import { atom } from 'recoil';

const isDarkAtom = atom({
  key: 'isDark',
  default: false,
});

export default isDarkAtom;

useRecoilValue를 이용해서 값을 사용하자

 

useRecoilValue : atom의 value를 사용한다

/App.tsx
import { useRecoilValue } from 'recoil';
import isDarkAtom from './atoms';

const isDark = useRecoilValue(isDarkAtom);

앞으로 isDark는 기본 값이 false인 값으로 세팅되어 사용할 수 있다!

 

useSetRecoilState : atom의 value를 수정하는 것

/coins.tsx
const setDarkAtom = useSetRecoilState(isDarkAtom);
const toggleDarkAtom = () => setDarkAtom((prev) => !prev);

<button onClick={toggleDarkAtom}>Toggle Dark Mode</button>

atom의 value를 수정하기 위해, useSetRecoilState을 이용하여 값을 isDarkAtom을 가지고 왔다.

toggleDarkAtom 변수에 setDarkAtom은 이전값과 반대인 true 혹은 false를 반환하게 하고,

버튼에 클릭이벤트를 줌으로써, 다크 & 라이트 모드가 변경되는 것을 확인할 수 있었다.

 

즉, 정리하자면?

useRecoilValue - atom의 value인 값 사용

useSetRecoilState : atom의 value를 수정하는 것

 

atom의 사용 이유는?

사용하지 않으면 props를 넘겨주며, 불 필요한 파일들을 불러와서 넘겨주어야할 수 있기 때문에!

즉, props drilling을 막기위해 !

파일로 분리하여, atom을 사용하여 props대신, 값을 가지고 올 수 있다!