Jotai를 사용한 React의 상태 관리 살펴보기: 실무 가이드

다양한 컴포넌트에서 데이터를 공유하고 액세스해야 하는 성장하는 애플리케이션에서 상태 관리가 복잡해지면 소품이 많아져 가독성과 확장성을 유지하는 데 어려움을 겪을 수 있습니다.

Redux는 애플리케이션 상태 관리를 위한 훌륭한 플랫폼이지만, 광범위한 API는 소규모 프로젝트에는 과도할 수 있습니다. 반면, Jotai는 원자 상태를 활용하여 상태 관리 프로세스를 간소화하는 경량 상태 관리 라이브러리로, 심층 객체 참조와 같은 문제를 제거하고 상태 관리에 대한 보다 간소화되고 확장 가능한 접근 방식을 촉진합니다.

Jotai란 무엇이며 어떻게 작동하나요?

Jotai 은 Redux와 같은 더 복잡한 대안과 달리 간단한 상태 관리 솔루션을 제공하는 상태 관리 라이브러리입니다. 이 라이브러리는 원자라는 독립적인 상태 단위를 사용하여 React 애플리케이션에서 상태를 관리합니다.

최적의 시나리오는 애플리케이션의 다양한 부분에서 Jotai의 후크 제공을 통해 제공되는 아톰을 활용하는 것인데, 이를 “useAtom”이라고 합니다. Jotai 원자 생성의 기본 데모는 다음과 같이 설명할 수 있습니다:

 import { atom } from 'jotai';
const countAtom = atom(1); 

Jotai의 원자들과 상호작용하기 위해, 컴포넌트의 상태를 검색하고 수정할 수 있다는 점에서 다른 React 훅과 유사한 useAtom 훅을 활용할 수 있습니다.

앞서 언급한 사례는 이 개념의 적절한 적용을 보여주는 대표적인 예시이며, 실제 시나리오에서 그 중요성과 관련성을 강조합니다.

 import { useAtom } from 'jotai';

const countAtom = atom(1);

function MyComponent() {
  const [count, setCount] = useAtom(countAtom);
  const increment = () => setCount((prevCount) => prevCount + 1);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
} 

이 인스턴스에서는 countAtom 원자 및 해당 숫자 값에 액세스하는 데 사용되는 useAtom 훅의 활용을 보여 줍니다. 그런 다음 setCount 함수가 실행되어 앞서 언급한 원자 값을 수정하고, 그 결과 해당 값에 의존하는 모든 컴포넌트가 자동으로 업데이트됩니다.

업데이트가 필요한 프로그램 부분만 선택적으로 활성화하는 전략을 구현하면 전체 애플리케이션을 새로 고쳐야 하는 횟수를 최소화할 수 있습니다. 이 방법은 모든 구성 요소를 반복적으로 업데이트하는 시나리오와 비교할 때 처리 속도가 빨라지고 시스템 효율성이 향상됩니다.

이제 상태 관리에서 Jotai의 숙련도를 보여주기 위해 React를 사용하여 기본적인 To-do 애플리케이션을 구축해 보겠습니다.

이 프로젝트의 소스 코드는 관심 있는 사람이 액세스할 수 있는 GitHub 리포지토리에 호스팅되어 있습니다.

Jotai를 이용한 React의 상태 관리

개발을 시작하기 위해 React 애플리케이션을 구축하거나 Vite를 사용하여 React 프로젝트를 구성할 수 있습니다. 기본적인 React 프레임워크를 설정한 후 애플리케이션 내에 Jotai를 도입하는 것이 좋습니다.

 npm install jotai 

애플리케이션에 Jotai를 통합하려면 전체 애플리케이션을 프로바이더 컴포넌트 안에 포함시켜야 합니다. 이 컴포넌트에는 프로그램 전체에 아톰을 파견하는 중앙 저장소 역할을 하는 스토어가 있습니다.

Provider 컴포넌트를 활용하면 애플리케이션 내에서 원자 종의 초기 조건을 지정할 수 있습니다. Provider로 앱을 포괄하면 모든 구성 부분이 앞서 언급한 원자에 대한 액세스를 얻고 사용 원자 훅을 통해 해당 원자의 상태와 상호 연관될 수 있습니다.

 import { Provider } from "jotai"; 

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from "jotai";

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
) 

데이터 스토어 구성

스토어는 애플리케이션 스테이트의 중앙 저장소 역할을 하며, 애플리케이션 스테이트 관리에 필요한 원자, 선택자, 다양한 기능의 공식화 및 Jotai를 활용한 다양한 기능을 포함합니다.

 import { atom } from "jotai";
export const TodosAtom = atom([]); 

TodoAtom의 생성 및 내보내기를 통해 애플리케이션 내 다양한 구성 요소에서 할 일 목록의 상태를 원활하게 상호 작용하고 업데이트할 수 있습니다.

할 일 애플리케이션 기능 구현

React 애플리케이션 내에서 Jotai의 구성이 완료되고 애플리케이션의 전체 상태를 관리하는 아톰이 설정되면 작업 항목의 추가, 삭제, 수정 기능을 수용할 수 있는 간단한 할 일 컴포넌트 생성을 진행합니다.

“제공된 지침에 따라 ‘src’ 디렉터리 내에 ‘components/Todo.jsx’라는 새 파일을 생성하고 그 안에 다음 코드를 삽입하세요.

데이터 저장소를 가져와서 프로젝트에서 “useAtom” 훅을 활용하세요.

JSX 요소와 함께 기능 컴포넌트를 생성하는 것은 작업 카탈로그를 관리하기 위한 간소화된 인터페이스를 렌더링하는 데 중요한 단계입니다.

ToDoList 애플리케이션에서 할 일 추가 및 삭제 기능을 구현합니다.

`handleAdd` 함수는 작업 인벤토리에 새 항목을 추가하는 작업을 수행합니다. 처음에는 변수 값이 null이거나 정의되지 않았는지 확인합니다. 그 후 반복되지 않는 식별자와 입력된 작업을 실체로 하는 새로운 작업을 생성합니다.

`setTodos` 함수가 호출되어 최신 작업을 연결하여 아톰 내의 할 일 항목 컬렉션을 수정합니다.마지막으로 `value` 상태는 누적 연산 후 빈 문자열로 재설정됩니다.

`handleDelete` 함수는 두 가지 주요 작업을 실행합니다. 첫째, 삭제하도록 선택된 특정 할 일 항목을 고유 식별자를 통해 추출하여 기본 할 일 목록에서 제거합니다. 이 프로세스에는 이전 목록에서 할당된 ID를 기반으로 특정 할 일 항목을 제거하기 위해 `prevTodos.filter()` 메서드를 적용하는 작업이 포함됩니다. 그 후 업데이트된 목록은 `setTodos` 함수를 사용하여 최신 정보로 다시 작성되므로 삭제된 할 일 항목이 전체 목록에서 효과적으로 제거됩니다.

Jotai를 사용하여 React 애플리케이션에서 상태 관리하기

이 가이드에서는 상태 관리 솔루션으로 Jotai를 활용하는 개요를 제시했지만, API와의 상호작용과 같이 비동기 작업이 필요한 상태 처리를 위해 특별히 맞춤화된 비동기 원자 생성 등 주목할 만한 기능이 추가로 있다는 점에 유의해야 합니다.

또한 기존 단위에서 값을 계산하고 추출하는 수단으로 사용되는 파생 단위를 공식화하여 프로그램의 다른 섹션에 뿌리를 둔 복잡한 조건을 관리할 수 있습니다.

애플리케이션의 상태를 관리하기 위해 이러한 기능을 활용하면 보다 탄력적이고 성능이 뛰어난 React 애플리케이션을 구축할 수 있습니다.