[React] 상태관리 - Recoil

사이드 프로젝트를 시작하게 되면서 상태관리 라이브러리가 필요해졌다. 팀원과 상의한 결과 Recoil로 결정이 되었다.
팀원분이 Redux를 사용해본 결과 생각보다 러닝커브가 있다고 하셨고, 나 또한 Redux가 코드가 되게 길어진다는 이야기를 들어서 차라리 Recoil을 사용하자고 결정했다. Zustand도 궁금했는데 Recoil이 더 많이 쓰이는거같아서 자료가 많은 기술로 ㄱㄱ~~

이런이유로 공부한거 기록을 해보겠습니다 ~!~!

환경 : vite
언어 : typescript

Recoil 사용 전 카운터 앱

[결과화면]

[코드]

import React, { FC, useState } from "react";
import "./App.css";

interface CounterProps {
  children?:React.ReactNode,
  onUp:()=>void,
  count:number,
}

interface DisplayCounterProps {
  children?:React.ReactNode,
  count:number,
}


const Counter: FC<CounterProps> = ({ onUp,count }) => {
  return <div>
    <h1>Counter</h1>
    <button onClick={() => onUp()}>+</button>{count}
  </div>;
};

const DisplayCounter : FC<DisplayCounterProps> = ({ count }) => {
  return <div>
    {count}
  </div>;
};

function App() {
  const[count,setCount] = useState(10);

  return (
    <>
      <Counter count = {count} onUp={() => {setCount(count+1)}}/>
      <DisplayCounter count={count}/>
    </>
  );
}

export default App

위의코드는 count, setCount의 상태를 부모 컴포넌트로 옮겨 props drilling을 하고 있다. 이를 해결하기 위해 recoil을 이용하여 전역상태로 변경하면 아래 코드와 같다.

Recoil 사용 후 카운터 앱

[코드]

/// app.tsx
import React, { FC } from "react";
import "./App.css";
import { useRecoilState } from "recoil";
import { countState } from "../../atom";
interface CounterProps {
  children?: React.ReactNode,
}

interface DisplayCounterProps {
  children?: React.ReactNode,
}


const Counter: FC<CounterProps> = () => {
  const [count, setCount] = useRecoilState(countState);
  return <div>
    <h1>Counter</h1>
    <button onClick={() => {
      setCount(count + 1);
    }}>+
    </button>
    {count}
  </div>;
};

const DisplayCounter: FC<DisplayCounterProps> = () => {
  const [count] = useRecoilState(countState);

  return <div>
    {count}
  </div>;
};

function App() {
  return (
    <>
      <Counter/>
      <DisplayCounter/>
    </>
  );
}

export default App;

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

export const countState = atom({
  key: "count", // key 지정
  default: 10, // default 값 지정
});

[결과화면]

dev tool을 사용해서 확인해 보면 부모 컴포넌트는 리랜더링이 되지 않는 모습이다. recoil을 쓰면 props drilling이 되면서 관련된 모든 컴포넌트가 리랜더링이 되는 문제를 해결할 수 있다..

참고
생활코딩 recoil 강의