NextJS에 Recoil 적용하기 (NextJS React 프로젝트 07)

 

※ Recoil 요약 정리 (Recoil에 대해 알고싶다면 이전 글을 참고해주세요)

// Recoil이란?
Recoil은 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리로,
최대한 React의 시맨틱과 동작을 유지하면서 위의 문제점을 개선하기 위해 만들어졌습니다.

// Recoil 핵심 개념 (atoms, selectors)
Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐
React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다.
Atoms는 컴포넌트가 구독할 수 있는 상태의 단위이며
Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환해줍니다.

 

저는 제 NextJS 프로젝트 상태관리 라이브러리로 Recoil을 사용하려고 합니다.

(상태 관리 라이브러리 비교는 다른 글에서 다루도록 할게요!)

 

우선 recoil 패키지를 설치합니다.

npm install recoil // 혹은 yarn add recoil

 

그리고 recoil 상태를 사용하는 부모 컴포넌트는 부모 트리 어딘가에 RecoilRoot가 필요한데요, 일반적으로 루트 컴포넌트에 넣습니다.

// 기존 루트 파일 (_app.tsx)
import type { AppProps } from "next/app"
import "../styles/globals.css"

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

// 수정한 루트 파일
import type { AppProps } from "next/app"
import "../styles/globals.css"
import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from "recoil"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  )
}

export default MyApp

 

이제 atoms이나 selectors 등의 Recoil 요소들을 사용하여 프로젝트를 이어나갈 수 있습니다!