20240729 Recoil

RingKim1·2024년 7월 30일

Recoil TIL TROUBLESHOOTING

TIL

목록 보기

63/77

Today

공부

Next.js 복습

Recoil

매우 간단한 상태관리 라이브러리

atom(maybe store???)

// app/recoil/atoms.ts

import { atom } from "recoil";

export const userState = atom<{
  email: string;
  name: string;
}>({
  key: "userState",
  default: {
    email: "",
    name: "",
  },
});

provider

// config/RecoilProvider
"use client";

import { RecoilRoot } from "recoil";

export default function RecoilProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <RecoilRoot>{children}</RecoilRoot>;
}

설정 및 사용(예시)

useRecoilState

"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>UserUpdatePage</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 Result</Link>
    </div>
  );
}

useRecoilValue

"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.email}</div>
      <div>Updated User Enail : {user.name}</div>
    </div>
  );
}