강의 출처: [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

recoil 상태관리

/recoil/atoms.ts

import { atom } from "recoil";

// 기본적인 상태태
export const userState = atom<{
  email: string;
  name: string;
}>({
  key: "userState",
  default: {
    email: "",
    name: "",
  },
});

RecoilProvider.tsx

• 레이아웃에 provider 감싸주기

• provider 만들어주기

"use client";

import { RecoilRoot } from "recoil";

// 클라이언트 라이브러리는 page같은 서버 컴포넌트에서 사용할 수 없다.
export default function RecoilProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <RecoilRoot>{children}</RecoilRoot>;
}

• 레이아웃에 감싸주기

컴포넌트에 사용하기

"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="email"
        value={user.email}
        onChange={(e) => setUser((pre) => ({ ...pre, email: e.target.value }))}
      />
      <input
        type="name"
        placeholder="name"
        value={user.name}
        onChange={(e) => setUser((pre) => ({ ...pre, name: e.target.value }))}
      />
      <Link href="/users/updated-user">업데이트 버튼</Link>
    </div>
  );
}