Jotai: React를 위한 간단하고 강력한 상태 관리 라이브러리-JS 튜토리얼-php.cn

Jotai: A Simple and Powerful State Management Library for React

Jotai: React를 위한 원시적이고 유연한 상태 관리 라이브러리

Jotai는 React 애플리케이션을 위한 최소한의 상태 관리 라이브러리입니다. 상태 관리에 대한 단순하고 원자적인 접근 방식을 제공하므로 아키텍처를 간결하고 이해하기 쉽게 유지하면서 구성 요소 내에서 직접 상태를 관리하고 업데이트할 수 있습니다. Jotai는 성능과 유연성이 뛰어나도록 설계되어 소규모 프로젝트부터 대규모 애플리케이션까지 모든 규모의 React 애플리케이션에 탁월한 선택입니다.

간단한 API와 작은 번들 크기를 갖춘 Jotai는 Redux와 같은 더 복잡한 상태 관리 라이브러리와 관련된 상용구 없이 원자 상태 관리를 선호하는 개발자에게 특히 적합합니다.

1. 조타이 핵심 개념

Jotai는 React에서 상태를 쉽게 관리할 수 있게 해주는 몇 가지 핵심 개념이 포함된 간단한 API를 소개합니다.

1. 원자

Jotai의 원자는 Recoil의 원자와 마찬가지로 가장 작은 상태 단위를 나타냅니다. 원자는 단일 상태를 보유하며 구성 요소는 원자의 값을 읽고 쓸 수 있습니다. Atom은 전 세계적으로 접근 가능하며 Jotai 상태 관리의 기반입니다.

예:

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

로그인 후 복사

atom은 상태의 단위를 정의하는 데 사용됩니다. 이 원자의 값은 React 구성 요소에서 읽거나 쓸 수 있습니다.

2. useAtom

useAtom 후크는 Jotai에서 원자와 상호 작용하는 기본 방법입니다. 이를 통해 구성 요소는 원자 값을 읽고 업데이트할 수 있습니다. 이는 useState를 사용하는 것과 유사하지만 구성 요소 간에 상태를 공유하는 기능이 있습니다.

예:

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

로그인 후 복사

useAtom은 Atom의 상태를 가져오고 설정하는 데 사용됩니다. 첫 번째 값(counter)은 현재 상태이고, 두 번째 값(setCounter)은 상태를 업데이트하는 데 사용되는 함수입니다.

3. 파생 원자

Jotai를 사용하면 다른 원자나 파생 데이터에 의존하는 파생 원자를 만들 수 있습니다. 이는 Recoil의 선택기와 유사하며 다른 원자를 기반으로 새로운 값을 계산할 수 있습니다.

예:

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

로그인 후 복사

파생 원자는 다른 원자를 읽고 해당 원자를 기반으로 새로운 값을 반환하는 함수를 사용하여 생성됩니다.

4. 원자 효과

Jotai는 원자 값의 변화에 따라 코드를 실행할 수 있는 원자 효과도 지원합니다. 이를 통해 상태 변경 시 데이터 가져오기 또는 콜백 실행과 같은 부작용을 수행할 수 있습니다.

예:

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

로그인 후 복사

이 패턴을 사용하면 원자 상태가 변경될 때마다 API 호출이나 로깅과 같은 부작용을 실행할 수 있습니다.

2. 조타이 이용의 장점

1. 간단하고 가볍습니다

Jotai는 매우 작은 API 표면을 사용하여 미니멀하고 가볍게 설계되었습니다. 액션 생성자나 리듀서 같은 상용구 코드가 필요하지 않으므로 더 빠르게 시작할 수 있습니다.

2. 공연

Jotai는 특정 원자를 사용하는 구성 요소만 해당 원자가 변경될 때 다시 렌더링되는 반응형 모델을 사용합니다. 이로 인해 특히 구성 요소가 많은 대규모 애플리케이션의 경우 효율적인 업데이트가 가능합니다.

3. 세밀한 제어

Jotai를 사용하면 애플리케이션의 상태를 세밀하게 제어할 수 있습니다. Atom은 독립적이며 리듀서나 컨텍스트 제공자와 같은 복잡한 구조 없이 직접 관리할 수 있습니다.

4. 최소한의 재렌더링

Jotai는 전체 구성 요소 트리를 다시 렌더링하는 대신 변경된 특정 Atom을 구독하는 구성 요소만 업데이트하여 다시 렌더링을 최적화합니다.

5. 확장성과 유연성

Jotai의 원자 설계를 통해 애플리케이션 성장에 따라 쉽게 확장할 수 있습니다. 애플리케이션 상태의 다양한 부분을 나타내는 여러 개의 독립적인 Atom을 가질 수 있으므로 아키텍처가 깔끔하고 유연해집니다.

3. Jotai 전체 적용 예시

다음은 Jotai를 사용하는 소형 카운터 앱의 예입니다.

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

로그인 후 복사

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

로그인 후 복사

import { atom } from 'jotai';

export const counterAtom = atom(
  0, // Initial value
  (get, set, update) => {
    // Atom effect: run a side effect when the counter is updated
    console.log('Counter updated:', update);
    set(counterAtom, update); // Update the state of counterAtom
  }
);

로그인 후 복사