[23.12.13] 오늘의 TIL(Jotai)

Jotai란?

Jotai는 상태를 원자 (atom)라 불리는 작은 단위로 나누어 간편한 상태 관리를 제공합니다.

Jotai의 핵심 개념

• createAtom: Jotai 원자를 생성
• useAtom: Jotai 원자를 사용하는 Hook
• useUpdate: Jotai 원자의 업데이트 함수를 사용하는 Hook

Jotai 예시 코드

import { atom } from 'jotai';

export const countAtom = atom(0);

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from '../atoms';

function ComponentA() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Component A - Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>Increment</button>
    </div>
  );
}

export default ComponentA;

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from '../atoms';

function ComponentB() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Component B - Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>Decrement</button>
    </div>
  );
}

export default ComponentB;