Jotai 소개 및 기본 문법 강의

<aside> "로펀의 인프런 상담소" 슬랙 채널 가입하기

제 강의를 수강하시는 모든 분들은 슬랙 채널에 들어오실 수 있습니다. 슬랙에 들어오시면 더 빠르게 질문에 답변을 받아보실 수 있어요! 😉

</aside>

이번 시간에 작성한 코드

https://github.com/lopun-lecture/inflearn-jotai-tutorial

Jotai는 React를 위한 primitive하고 유연한 상태 관리 라이브러리입니다. 최소한의 API로 상태를 관리할 수 있으며, TypeScript로 작성되어 타입 안정성이 뛰어납니다.

Jotai는 pnpm을 이용해서 설치할 수 있습니다.

pnpm create next-app@15 inflearn-jotai-tutorial
cd inflearn-jotai-tutorial
pnpm add jotai

Jotai + Next.js 적용법

config/providers.tsx

"use client";

import { Provider as JotaiProvider } from "jotai";

export default function Providers({ children }: React.PropsWithChildren) {
  return <JotaiProvider>{children}</JotaiProvider>;
}

app/layout.tsx

import "./globals.css";
import Providers from "./config/providers";

export default async function RootLayout({ children }) {
  return (
      <html lang="en">
        <body>
	        <Providers>
		        {children}
	        </Providers>
        </body>
      </html>
  );
}

기본 사용법

atom 생성하기

import { atom } from 'jotai'

export const countAtom = atom(0) // 원시값
export const userAtom = atom({ name: 'John', age: 20 }) // 객체
export const derivedAtom = atom((get) => get(countAtom) * 2) // 다른 atom을 참조

atom 사용하기