React - 상태관리 (Zustand 그외 Redux...)

리액트 상태 관리 라이브러리

 

1. Redux: Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나. 애플리케이션의 전역 상태를 효과적으로 관리하고 변경 사항을 추적하기 위해 사용된다.
2. Zustand: Zustand은 리액트 상태 관리를 위한 간단하고 직관적인 라이브러리. Zustand은 React Hooks와 함께 사용되며, 전역 및 로컬 상태를 관리하고 리액트 컴포넌트 간의 상태 공유를 용이하게 해준다.
3. Recoil: Recoil은 페이스북에서 개발한 리액트 상태 관리 라이브러리이다. Recoil은 상태의 원자성과 종속성 추적을 위한 간단한 API를 제공하며, 상태를 효과적으로 관리하고 여러 컴포넌트 간에 공유할 수 있다.

이중에서 이번에 자세히 얘기할건 이번 프로젝트에서 도입될 Zustand 라는 라이브러리다.

 

Zustand

개념
Zustand는 리액트 상태 관리를 위한 라이브러리로, React Hooks와 함께 사용된다. Zustand을 사용하면 전역 상태를 효과적으로 관리하고, 컴포넌트 간의 상태 공유를 쉽게 할 수 있다. 이를 통해 상태 관리에 대한 복잡성을 줄이고 코드의 가독성을 높일 수 있다.
Zustand의 핵심 요소는 상태 컨테이너와 상태 업데이트 함수다. 상태 컨테이너는 전역 상태를 보유하고 관리하는 역할을 한다. 상태 값은 컨테이너에 저장되며, 컨테이너에 접근하여 상태 값을 읽거나 수정할 수 있다.

사용법

예를 들어서 할 일 목록을 관리하는 리액트 애플리케이션을 개발하고 있는데 Zustand을 사용하여 할 일 목록의 상태를 관리를 해보자.

• 라이브러리 설치 - 프로젝트 폴더에서 다음 명령어를 실행하여 Zustand을 설치.

npm install zustand

• 상태 컨테이너 생성 - 할 일 목록을 관리할 상태 컨테이너를 생성, create 함수를 사용하여 상태 컨테이너를 생성합니다. 초기 상태와 액션(reducer)을 인자로 전달.

import create from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],
  addTodo: (newTodo) => set((state) => ({ todos: [...state.todos, newTodo] })),
}));

// 위의 코드에서 useTodoStore는 생성된 Zustand 컨테이너에 접근하기 위한 Hook. 
// todos는 초기 상태로 빈 배열을 가지고 있고, addTodo는 새로운 할 일을 추가하는 액션이다.

• 컴포넌트에서 Zustand 사용 - useTodoStore Hook을 호출하여 상태 값과 업데이트 함수를 작성.

import React from 'react';
import { useTodoStore } from './useTodoStore';

const TodoList = () => {
  const todos = useTodoStore((state) => state.todos);
  const addTodo = useTodoStore((state) => state.addTodo);

  // 할 일 목록 렌더링 및 추가 기능 구현
};

export default TodoList;

 

 

Function in Zustand 

• createSelectors : 상태에서 필요한 부분만 추출하여 반환하는 함수. 위에 예제 코드와 비교해보면 해당 함수를 사용해서 좀 더 쉽게 접근할수 있다.

import React from 'react';
import { useTodoStore } from './useTodoStore';
import { createSelectors } from 'zustand/selectors';

const selectors = createSelectors(useTodoStore);

const TodoList = () => {
  const todos = useTodoStore(selectors.todos);
  const addTodo = useTodoStore(selectors.addTodo);

 return (
    <div>
      <button onClick={useTodoStore.addTodo} disabled={!canDecrement}>
        Decrement
      </button>
      <ul>
		{todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

 

TypeScript

• 타입 스트립트 사용시엔 아래 처럼 수정된다.

import create from 'zustand';

interface Todo {
  id: number;
  text: string;
}

interface TodoStore {
  todos: Todo[];
  addTodo: (newTodo: Todo) => void;
}

const useTodoStore = create<TodoStore>((set) => ({
  todos: [],
  addTodo: (newTodo) => set((state) => ({ todos: [...state.todos, newTodo] })),
}));

export default useTodoStore;