✏️ Recoil 사용하기

 

Docs

Recoil 시작하기 | Recoil

 

 

 

---

 

Recoil의 상태관리

Recoil은 원자 기반의 상태 관리 방식을 사용한다.

상태는 원자의 단위로 관리되고, 컴포넌트는 이 원자의 구독자가 된다.

 

 

상태 업데이트 방식

Recoil은 상태 변경 시 전체 컴포넌트 트리를 재렌더링하지 않고, 변경된 원자의 구독자만 재렌더링한다.

React Hooks와 유사하게 작성되어 있다. 예를 들어 useRecoilState, useRecoilValue 등의 Hooks이 있다.

 

 

---

 

🤔 이쯤에서 궁금한 Recoil과 Zustand의 차이점

	Recoil	Zustand
상태관리	원자 기반의 상태 관리 방식을 상태는 원자라는 단위로 관리, 컴포넌트는 이 원자의 구독자가 됨.	스토어 기반의 상태 관리 방식 상태는 하나의 전역 스토어에 관리, 컴포넌트는 이 스토어에서 상태를 가져옴.
상태 업데이트 방식	전체 컴포넌트 트리를 재렌더링하지 않고, 변경된 원자의 구독자만 재렌더링	스토어 전체를 구독하고 있는 컴포넌트만 재렌더링
API	React Hooks와 유사한 스타일, useRecoilState, useRecoilValue 등	간단한 API를 제공, 상태와 액션을 포함하는 하나의 객체를 작성하고, useStore Hook을 사용하여 접근
성능	Recoil은 변경된 원자의 구독자만 재렌더링하므로 대규모 애플리케이션에서 성능이 더 좋을 수 있다.	Zustand는 상대적으로 더 간단하고 사용이 편리하여 소규모 프로젝트에 더 적합할 수 있다.

 

따라서 프로젝트의 규모와 복잡도, 팀의 선호도에 따라 Recoil 또는 Zustand 중 하나를 선택하면 된다.

하지만 둘다 써본 입장에서는 둘다 기본적으로 사용하기 쉬웠지만

Recoil을 좀더 써보고 왜 요새 트랜드는 Zustand를 쓰는지 판단 해 봐야 할 것 같다..

결국은 전역상태 관리는 개인 선호도에 따라 갈라질 것 같다!

 

 

---

 

Recoil 설치

npm install recoil
//또는
yarn add recoil

 

 

 

RecoilRoot

recoil 상태를 관리하는 컴포넌트에 RecoilRoot를 넣어준다.

Next.js 을 사용하면 따로 provider 컴포넌트로 만들어서 넣어줘도 된다.

 

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

 

 

또는

RecoilProvider.tsx

"use client";
import { RecoilRoot } from "recoil";
import { AuthProvider } from "./AuthProvider";

const RecoilProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <RecoilRoot>
      <AuthProvider>{children}</AuthProvider>
    </RecoilRoot>
  );
};

export default RecoilProvider;

 

 

---

 

사용법

초기값을 관리하는 파일 만들기

index.ts

import { atom } from "recoil";

export const isEditState = atom({
  key: "isEditState", //변수명
  default: false, //초기값
});

 

key는 변수명(컴포넌트에서 사용할 이름)

default는 초기값을 의미한다.

 

 

 

 

 

사용하려는 컴포넌트

import { useState } from "react";

const Edit = () => {
  const [isEdit, setIsEdit] = useState(false);
  return <div>Recoil 연습하기</div>;
};

export default Edit;

 

기존 컴포넌트에서는 이렇게 사용할 것인데

useState와 유사하니 내가 알기 쉽게 정리하자면,

useState 대신 useRecoilState로

false자리엔 대신 isEditState로 바꿔준다.

 

 

 

 

 

적용한 결과

import { isEditState } from "@/store";
import { useRecoilState } from "recoil";

const Edit = () => {
  const [isEdit, setIsEdit] = useRecoilState(isEditState);
  return <div>Recoil 연습하기</div>;
};

export default Edit;

 

store에 있는 isEditState 내용을 가져와서 사용한다! 라고 보면된다.

useRecoilState에서 가져오고, isEditState에 있는 내용을 꺼내와서

isEdit 이름으로 바꿔서 사용한다고 생각하면 된다!