FRONTEND/Next.js

[Next.js 14 + Supabase ] Next.js[ Typescript ] Recoil

죠으닝 2024. 7. 26. 12:48

https://recoiljs.org/

 

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>
  );
}