Recoil
A state management library for React.
recoiljs.org
Recoil은 전역 상태 관리 라이브러리이다.
npm install recoil
모든 state 를 모아놓는 공간
atom은 상태의 단위로, atom에 저장된 상태는 여러 컴포넌트에서 구독할 수 있습니다.
import { atom } from "recoil";
export const userState = atom({
key: "userState",
default: {
email: null,
name: null,
},
});
Recoil 상태를 사용하려면 useRecoilState와 useRecoilValue를 사용합니다.
useRecoilState는 상태를 읽고 쓸 수 있는 함수를 반환하고, useRecoilValue는 상태를 읽을 수만 있는 함수를 반환합니다.
"use client";
import { userState } from "@/app/recoil/atoms";
import { useRecoilState } from "recoil";
export default function UserUpdatePage() {
const [user, setUser] = useRecoilState(userState);
return (
<div>
<h1>Update User Page</h1>
<input type="email" />
<input type="name" />
</div>
);
}
Recoil을 적용하기 위해서는
https://velog.io/@khakisage/Next.js-Recoil-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
[Next.js] Recoil 적용하기.
NextJS Recoil 사용법.
velog.io
RecilProvider를 만들어서 최상단 layout.tsx에 적용하면됨
"use client";
import { RecoilRoot } from "recoil";
export default function RecoilProvider({ children }: React.PropsWithChildren) {
return <RecoilRoot>{children}</RecoilRoot>;
}
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import RecoilProvider from "./config/RecoilProvider";
const inter = Inter({ subsets: ["latin"] }); //폰트
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<RecoilProvider>
<html lang="en">
<body className={inter.className}>
<p>From Layout</p>
{children}
</body>
</html>
</RecoilProvider>
);
}
그리고
update 페이지에서
"use client";
import { userState } from "@/app/recoil/atoms";
import Link from "next/link";
import { useRecoilState } from "recoil";
export default function UserUpdatePage() {
const [user, setUser] = useRecoilState(userState);
return (
<div>
<h1>Update User Page</h1>
<input
type="email"
placeholder="Enter your email"
value={user.email}
onChange={(e) =>
setUser((prev) => ({ ...prev, email: e.target.value }))
}
/>
<input
type="name"
placeholder="Enter your name"
value={user.name}
onChange={(e) => setUser((prev) => ({ ...prev, name: e.target.value }))}
/>
<Link href="/users/updated-user">Check Updated User</Link>
</div>
);
}
input의 내용이 변경될 때 마다 recoil을 사용하여 전역 상태에 저장이 가능하고 , 그 값도 가져올 수 있다.
실제로 저장됐는지 확인하기 위해서
updated-user 페이지를 만들어서 테스트해봄
"use client";
import { userState } from "@/app/recoil/atoms";
import { useRecoilValue } from "recoil";
export default function UpdatedUserPage() {
const user = useRecoilValue(userState);//읽기만 가능
return (
<div>
<h1>Updated User Page</h1>
<div>Updated User Name:{user.name}</div>
<div>Updated User Email:{user.email}</div>
</div>
);
}
'FRONTEND > Next.js' 카테고리의 다른 글
| [Next.js 14 + Supabase ] Material Tailwind 기본 설정하기 (0) | 2024.07.27 |
|---|---|
| [Next.js 14 + Supabase ] Next.js[ Typescript ] React Query (0) | 2024.07.26 |
| [Next.js 14 + Supabase ] Next.js[ Typescript ] Server Action,Metadata (0) | 2024.07.26 |
| [Next.js 14 + Supabase ] Next.js[ Typescript ] 프로젝트 시작하기 및 라우터 폴더 생성 (0) | 2024.07.26 |
| [Next.js] 배포 (0) | 2024.03.26 |