![bg right:50% width:50%](https://cdn.candycode.com/jotai/jotai-mascot.png) # Jotai ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [Jotai 소개](#jotai-소개) - [Jotai 시작하기](#jotai-시작하기) - [Server-side rendering](#server-side-rendering) - [API 살펴보기](#api-살펴보기) --- ![bg right:50% width:50%](https://cdn.candycode.com/jotai/jotai-mascot.png) # Jotai 소개 --- # Primitive and flexible
state management for React --- # Jotai란? - React를 위한 가벼운 상태 관리 라이브러리 - React에서 state를 관리하고 공유하는 것을 보다 간단하고 효율적으로 만들어 줌 - **원자(Atom)** 개념을 기반으로 하여 상태를 관리 (Atomic Approach) - Atom은 상태의 최소 단위로 독립적인 상태 단위를 나타냄 - Atom을 사용하여 상태 간의 의존성과 업데이트 흐름을 명확하게 표현할 수 있음 --- # Jotai의 주요 특징 - **경량성** - 다른 상태 관리 라이브러리들에 비해 코드베이스가 작고 의존성이 적음 - **간단한 사용법** - React의 훅(Hook)과 유사한 방식으로 상태를 정의하고 사용할 수 있음 - 상태 정의와 구독(subscribe), 업데이트가 간단하게 이루어짐 - **모듈성과 확장성** - 필요한 기능만을 선택적으로 사용할 수 있는 모듈식 구조를 가지고 있음 - 비동기 처리, 파생 상태(derived state) 생성 등 다양한 기능을 추가할 수 있음 - **Recoil과 유사한 API** - Jotai의 API는 Recoil과 유사하지만, 보다 단순하고 가벼운 구현을 제공함 --- # Jotai 사용 예시 ```jsx import React from 'react'; import { atom, useAtom } from 'jotai'; // 1. Atom 생성 const countAtom = atom(0); function Counter() { // 2. Atom 사용 const [count, setCount] = useAtom(countAtom); return (

{count}

); } export default Counter; ``` --- # Jotai의 장점과 단점 - **장점 👍** - 매우 가벼운 상태 관리 라이브러리로 성능에 영향을 덜 미침 - React 훅과의 자연스러운 통합으로 사용이 간편함 - 모듈성과 확장성이 높아 필요한 기능만을 선택하여 사용할 수 있음 - **단점 👎** - 다른 상태 관리 라이브러리(Redux, MobX 등)에 비해 제한적인 기능을 제공하므로, 대규모 애플리케이션에 사용하기에는 적합하지 않을 수 있음 --- ![bg right:50% width:50%](https://cdn.candycode.com/jotai/jotai-mascot.png) # Jotai 시작하기 --- # 설치하기 ```bash # npm npm install jotai # yarn yarn add jotai # pnpm pnpm add jotai ``` --- # Primitive Atoms 생성하기 > Primitive Atom은 어떤 타입으로든 만들 수 있음 (booleans, numbers, strings, objects, arrays, sets, maps 등) ```tsx import { atom } from 'jotai'; const countAtom = atom(0); const countryAtom = atom('Japan'); const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka']); const animeAtom = atom([ { title: 'Ghost in the Shell', year: 1995, watched: true }, { title: 'Serial Experiments Lain', year: 1998, watched: false } ]); ``` --- # Derived Atoms 생성하기 > Derived Atom은 다른 Atom을 읽어서 값을 리턴할 수 있음 ```tsx const progressAtom = atom((get) => { const anime = get(animeAtom); return anime.filter((item) => item.watched).length / anime.length; }); ``` --- # Atoms 사용하기 (같은 컴포넌트에서 읽고 쓰기) `useAtom()` 훅 사용 ```tsx import { useAtom } from 'jotai'; const AnimeApp = () => { const [anime, setAnime] = useAtom(animeAtom) return ( <>

{item.title}

<> ) } ``` --- # Atoms 사용하기 (다른 컴포넌트에서 읽고 쓰기) `useAtomValue()` 훅과 `useSetAtom()` 훅 사용 ```tsx import { useAtomValue, useSetAtom } from 'jotai' const AnimeList = () => { const anime = useAtomValue(animeAtom) return (

{item.title}

) } const AddAnime = () => { const setAnime = useSetAtom(animeAtom) return ( ) } const ProgressTracker = () => { const progress = useAtomValue(progressAtom) return (

{Math.trunc(progress * 100)}% watched

) } const AnimeApp = () => { return ( <> ) } ``` --- ![bg right:50% width:50%](https://cdn.candycode.com/jotai/jotai-mascot.png) # Server-side rendering --- # Next.js (App Router) 별도의 클라이언트 컴포넌트로 Provider를 만들고 서버 컴포넌트에서 `import`해서 사용 ```tsx 'use client' import { Provider } from 'jotai'; export const JotaiProvider = ({ children }) => { return ( {children} ) } ``` ```tsx import { JotaiProvider } from '../components/providers'; export default function RootLayout({ children }) { return ( {children} ) } ``` --- # Next.js (Pages Router) `_app.js` 파일에서 `Provider`로 감싸기 ```tsx import { Provider } from 'jotai' export default function App({ Component, pageProps }) { return ( ) } ``` --- ![bg right:50% width:50%](https://cdn.candycode.com/jotai/jotai-mascot.png) # API 살펴보기 --- # Core ```tsx import { atom, useAtom } from 'jotai'; // Create your atoms and derivatives const textAtom = atom('hello'); const uppercaseAtom = atom((get) => get(textAtom).toUpperCase()); // Use them anywhere in your app const Input = () => { const [text, setText] = useAtom(textAtom); const handleChange = (e) => setText(e.target.value); return ( ); }; const Uppercase = () => { const [uppercase] = useAtom(uppercaseAtom); return

Uppercase: {uppercase}

; }; // Now you have the components const App = () => { return ( <> ); }; ``` --- # Utilities ```tsx import { useAtom } from 'jotai'; import { atomWithStorage } from 'jotai/utils'; // Set the string key and the initial value const darkModeAtom = atomWithStorage('darkMode', false); const Page = () => { // Consume persisted state like any other atom const [darkMode, setDarkMode] = useAtom(darkModeAtom); const toggleDarkMode = () => setDarkMode(!darkMode); return ( <>

Welcome to {darkMode ? 'dark' : 'light'} mode!

); }; ``` --- # Extensions ```tsx import { useAtom } from 'jotai'; import { atomWithImmer } from 'jotai-immer'; // Create a new atom with an immer-based write function const countAtom = atomWithImmer(0); const Counter = () => { const [count] = useAtom(countAtom); return

count: {count}

; }; const Controls = () => { // setCount === update: (draft: Draft) => void const [, setCount] = useAtom(countAtom); const increment = () => setCount((c) => (c = c + 1)); return ; }; ``` --- # References - https://jotai.org/ - https://github.com/pmndrs/jotai --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)