상태관리!

리액트의 특징을 재미나게 정리해 놓은 유튜브 영상을 본적이 있다.

웃긴리액트

상위 컴포넌트에서 계속해서 하위 컴포넌트로 State 즉 , props를 건네주는 모습이다..
ㅋㅋㅋ
사실 규모가 있는 프로젝트를 해본적이 없어서 잘 모르고 있었지만 이번에 상태관리를 배우면서

아니 ,단순한 toggle 함수를 전달해주면서도 global state의 필요성을 느꼈다 !

Recoil

Recoil은 React JS 에서 사용할 수 있는 State Management library이다.

거품을 생성할 수 있다. 나는 이렇게 이해했다.

영화 설국열차의 전투씬에서 깜깜해진 기차 안, 적들은 야간투시경을 꼈고 주인공 무리는 어느 장비 없이 그들에게 몰살 당할 위기에 처한다. 그때, 한 아이가 기차 꼬리칸에 불이 있음을 깨닳게 된다..!

불은 꼬리칸에서 부터 주인공 무리가 있는 칸까지 전달되어 오는데 보는 관객의 입장에서 아 참,,너무느리네!!
이러다 다 죽겠어!! 라는 생각을 한적이있다. 이때 .. 이 불은 state에 비유될 수 있다.
각 기차칸은 component가 된다. 불 (state)는 많은 기차 칸 (component)를 거쳐 필요한 곳에 전달 된다. 기차 칸이 가까우면 상관없겠지만 .. 만약 꼬리칸에서 맨 앞칸까지 배달이 왔다면?.. 주인공 무리는 몰살 당했을 것이다..!!

그럴 때 Recoil이 있었다면!!
Recoil은 atom이라는 bubble을 만들어 필요한 컴포넌트에서 사용이 가능하다. 컴포넌트에서 컴포넌트로 계속 이동 되는 것이 아니라 늘 컴포넌트 주변에 있는 것이다. 즉, 주인공 앞으로 불이 자연스럽게 둥둥 떠나니고 있을 때 그 불을 잡아 피우기만 하면된다!

Recoil을 쓰지 않았을 때의 코드를 먼저 살펴보겠다

const App = ()=>{
  
 return <div>
   <One color="white" /> 
   </div>
  //전달
  
const One =({color})=>{
  return <div>
    <Two color={color}/>
    </div<
  
} 
//전달

const Two =({color})=>{
 return <div>
   <Three color={color} / >
   
   </div> 
}
//전달

const Three=({color})=>{
 <div>
   <h1>`우리의 색깔은! ${color}` </h1>
   </div> 
}
//사용
}

위 코드처럼 Three라는 컴포넌트에서 color 라는 value를 사용하고 싶어하는데 App에서부터 전달 전달이 되어야한다. 만약 이보다 더 큰 규모의 코드였다면 아마 전달해주다 화나서 노트북을 껐을거 같다.
이를 막아주는 것이 Recoil!!

Recoil을 사용했을 때의 코드를 살펴보겠다

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


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

root.render(
  <RecoilRoot>
      <App />
  </RecoilRoot>
);

//이렇게 RecoilRoot는 index.tsx에 넣어 App을 감싸주면 Recoil을 본격적으로 사용할 수 있다!!

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

export const color = atom({
  key: "COLOR",
  default: "white",
}); // atom은 key , Defaul value 이 두개가 atom이라는 bubble을 만들 때 필요하다.


//Three.tsx
import { color } from "./routes/atoms";

const Three=()=>{
 const color =  useRecoilValue(color) 
  
 return <div>
   <h1>`우리의 색깔은! ${color}`</h1>
   </div>
}

위 코드와 같이 atom을 생성하고 Recoilroot를 감싸주고
필요한 컴포넌트에서 useRecoilValue(atom)하면 사용할 수 있다.

또, 만약 위 Value를 변경하고 싶다면
useSetRecoilState(atom) 하면 변경이 가능하다!!

정리!
1. RecoilRoot를 index.tsx (최상위 컴포넌트)에 적용한다.
2. atom을 생성할 때 atom({key:"",default:""})로 설정한다.
3. 사용하고 싶은 컴포넌트에서 useRecoilValue()로 값을 가져온다.
4. 값을 변경하고 싶은 컴포넌트에서 useSetRecoilState()한다