소식

Dec 04, 2023

Jotai를 사용하여 React에서 상태 관리 살펴보기: 실용 가이드

Jotai로 React 앱의 상태 관리 수준을 높이세요. Redux의 더 간단한 대안이자 소규모 프로젝트에 적합합니다! 소규모 프로젝트의 상태 관리는 일반적으로 React를 사용하면 간단합니다.

Jotai로 React 앱의 상태 관리 수준을 높이세요. Redux의 더 간단한 대안이자 소규모 프로젝트에 적합합니다!

소규모 프로젝트의 상태 관리는 일반적으로 React 후크와 소품을 사용하여 간단합니다. 그러나 애플리케이션이 성장하고 다양한 구성 요소에서 데이터를 공유하고 액세스해야 하는 필요성이 대두되면서 프롭 드릴링이 발생하는 경우가 많습니다. 불행하게도 prop 드릴링은 코드베이스를 빠르게 복잡하게 만들고 확장성 문제를 야기할 수 있습니다.

Redux는 훌륭한 상태 관리 솔루션을 제공하지만 API는 비교적 소규모 프로젝트에 부담스러울 수 있습니다. 이와 대조적으로 상태를 관리하기 위해 Atom이라는 독립적인 상태 단위를 활용하는 최소 상태 관리 라이브러리인 Jotai는 Prop 드릴링과 같은 문제를 제거하고 보다 간단하고 확장 가능한 상태 관리 접근 방식을 가능하게 합니다.

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

이상적으로는 애플리케이션의 다양한 구성 요소가 Jotai에서 제공하는 후크를 사용하여 이러한 원자에 액세스하고 업데이트합니다.useAtom . Jotai Atom을 생성하는 방법에 대한 간단한 예는 다음과 같습니다.

Jotai에서 원자에 액세스하고 작업하려면 다음을 사용하면 됩니다.useAtom다른 React 후크와 마찬가지로 기능 구성 요소 내의 상태 값에 액세스하고 업데이트할 수 있는 후크입니다.

다음은 사용법을 보여주는 예입니다.

이 예에서는useAtom후크는 액세스에 사용됩니다.countAtom 원자 및 관련 값. 그만큼세트카운트함수는 원자 값을 업데이트하는 데 사용되며 관련 구성 요소는 업데이트된 값으로 자동으로 다시 렌더링됩니다.

영향을 받는 구성요소만 트리거함으로써 애플리케이션 전체에서 불필요한 다시 렌더링을 줄입니다. 재렌더링에 대한 이러한 목표 접근 방식은 애플리케이션의 전반적인 성능을 향상시킵니다.

기본 사항은 끝났으니 Jotai의 상태 관리 기능을 더 잘 이해하기 위해 간단한 To-do React 앱을 만들어 보겠습니다.

이 GitHub 저장소에서 이 프로젝트의 소스 코드를 찾을 수 있습니다.

시작하려면 React 애플리케이션을 생성하세요. 또는 Vite를 활용하여 React 프로젝트를 설정할 수 있습니다. 기본 React 애플리케이션을 스캐폴딩한 후에는 애플리케이션에 Jotai를 설치하세요.

다음으로, 애플리케이션에서 Jotai를 활용하려면 전체 앱을 다음과 같이 래핑해야 합니다.공급자 요소. 이 구성 요소에는 애플리케이션 전체에 원자 값을 제공하기 위한 중앙 허브 역할을 하는 저장소가 포함되어 있습니다.

또한 원자의 초기 상태를 선언할 수 있습니다. 앱을공급자, 애플리케이션의 모든 구성 요소는 정의한 원자에 액세스할 수 있으며, 그런 다음 이를 통해 상태를 업데이트하고 상호 작용할 수 있습니다.useAtom훅.

이제 애플리케이션을index.js또는main.jsx아래 그림과 같이.

저장소는 애플리케이션 상태에 대한 중앙 저장소 역할을 합니다. 여기에는 일반적으로 Jotai를 사용하여 상태 관리에 필요한 원자, 선택기 및 기타 관련 기능의 정의가 포함됩니다.

이 경우 To-do 애플리케이션의 항목 목록을 관리하기 위한 Atom을 관리합니다. 에서소스디렉토리, 생성TodoStore.jsx파일을 만들고 아래 코드를 추가하세요.

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

이제 React 애플리케이션에서 Jotai를 구성하고 애플리케이션 상태를 관리하기 위한 Atom을 생성했으므로 계속해서 할일 항목에 대한 추가, 삭제 및 편집 기능을 처리할 간단한 할일 컴포넌트를 생성하세요.

새로 만들기구성 요소/Todo.jsx파일을