Next.js에서 Recoil Root 설정하는 법
Next.js에서 Recoil을 사용하려면 React와는 초기 세팅 방법이 약간 다르기 때문에 Recoil Root를 어떻게 세팅하면 되는지 정리해보려 한다.
Next.js에서 Recoil 사용하는 법
1. Provider 생성
// app/RecoilRootProvider.tsx
// 컴포넌트 이름은 자유롭게 지정
import { ReactNode } from "react";
import { RecoilRoot } from "recoil";
type Props = {
children: ReactNode;
};
export default function RecoilRootProvider({ children }: Props) {
return <RecoilRoot>{children}</RecoilRoot>;
}
Provider 역할을 할 컴포넌트를 하나 생성하고 RecoilRoot를 만들어 children을 감싸준다. children의 타입은 ReactNode로 지정하면 된다.
2. RootLayout에 적용하기
// app/layout.tsx
import RecoilRootProvider from "./RecoilRootProvider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<RecoilRootProvider>{children}</RecoilRootProvider>
</body>
</html>
);
}
그리고 가장 위에 있는 layout.tsx, 즉 RootLayout으로 와서 children을 위에서 생성한 Provider로 감싸준다. 이렇게 해주면 Next.js에서 Recoil을 사용할 수 있다!😊
'FE - Tools > 개발 도구' 카테고리의 다른 글
| [React] 로딩 컴포넌트를 제공하는 라이브러리 (Spinner, Skeleton 등) (0) | 2024.01.11 |
|---|---|
| [Zustand] 간단한 상태 관리, React에서 Zustand 사용하는 방법 (0) | 2023.07.15 |
| [Redux Toolkit] TypeScript로 store, slice, selector 타입 지정하기 (0) | 2023.02.26 |
| [React Query] TypeScript로 getQueryState 사용하기 (0) | 2023.02.26 |
| [React Query] React Query 알아보기 (0) | 2023.01.30 |
