[React 상태 관리 라이브러리] - Jotai, Context, Zustand 비교

기초 프로젝트에서 처음으로 Jotai를 사용해보았고, 그 경험을 바탕으로 Jotai의 장점과 단점을 Context와 Zutand를 비교해보려 합니다.

 Jotai 사용 후 Context와 Zustand와의 비교 💫

 

📌 Jotai 사용 예제

import React from 'react';
import { atom, useAtom } from 'jotai';

// atom 정의
const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>Jotai 카운터</h1>
      <Counter />
    </div>
  );
}

 

Jotai의 장점

1. 단순한 API: Jotai는 상태를 atom으로 정의하고 간단하게 사용할 수 있어, 처음 사용하는 개발자도 쉽게 적응할 수 있었습니다. 복잡한 설정이 필요 없어서 빠르게 프로젝트에 적용할 수 있었습니다.
2. 독립적인 상태 관리: 각 atom이 독립적으로 작동하므로, 상태 변경 시 리렌더링이 필요한 컴포넌트만 업데이트됩니다. 이는 성능 최적화에 큰 도움이 되었고, 불필요한 리렌더링을 줄일 수 있었습니다.
3. React의 생명주기와 잘 통합: Jotai는 React의 Suspense와 함께 사용할 수 있어 비동기 데이터 처리 시 매우 유용했습니다. 이를 통해 컴포넌트의 로딩 상태를 효과적으로 관리할 수 있었습니다.

Jotai의 단점

1. 상태 관리의 복잡성: 프로젝트가 커지면서 atom의 수가 많아져 관리가 복잡해질 수 있었습니다. 특히, 상태를 추적하고 유지하는 데 혼란스러운 부분이 있었습니다.
2. 고급 기능 부족: Zustand와 비교했을 때, 복잡한 상태 관리 로직이나 미들웨어 지원이 부족했습니다. 특정 상황에서는 더 강력한 기능이 필요한 경우가 있어, 상황에 따라 불편함을 느꼈습니다.

 

---

📌 Context 사용 예제

import React, { createContext, useContext, useState } from 'react';

// Context 생성
const CountContext = createContext();

function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default function App() {
  return (
    <CountProvider>
      <h1>Context 카운터</h1>
      <Counter />
    </CountProvider>
  );
}

 

Context의 장점

1. 내장된 기능: Context는 React에 내장되어 있어 추가 라이브러리 설치 없이 사용할 수 있습니다. 간단한 상태 관리를 필요로 하는 작은 프로젝트에 적합합니다.
2. 명확한 데이터 흐름: 제공하는 값을 명확히 정의할 수 있어 상태의 흐름을 이해하기 쉽습니다. 팀원 간의 협업 시에도 커뮤니케이션이 용이했습니다.

Context의 단점

1. 불필요한 리렌더링: 값이 변경되면 해당 값을 사용하는 모든 컴포넌트가 리렌더링됩니다. 이는 성능 저하로 이어질 수 있어, 큰 프로젝트에서는 단점으로 작용할 수 있습니다.
2. 복잡한 구조: 여러 Context를 사용할 경우 관리가 복잡해지며, 특히 중첩된 Context는 코드의 가독성을 떨어뜨릴 수 있습니다.

 

---

📌 Zutand 사용 예제

import create from 'zustand';
import React from 'react';

// Zustand 스토어 생성
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h1>Zustand 카운터</h1>
      <Counter />
    </div>
  );
}

 

Zustand의 장점

1. 성능 최적화: Zustand는 상태를 직접 관리하며, 선택적 리렌더링을 지원합니다. 이를 통해 불필요한 리렌더링을 줄이고 성능을 개선할 수 있습니다.
2. 미들웨어 지원: Zustand는 미들웨어를 통해 상태 관리 로직을 쉽게 확장할 수 있어, 복잡한 요구사항을 처리하는 데 유리했습니다.

Zustand의 단점

1. 학습 곡선: Zustand의 API는 Jotai보다 복잡할 수 있어, 처음 사용하는 경우 약간의 학습이 필요했습니다.
2. 상태 관리의 비조직성: 전역 상태를 관리하다 보니 상태를 잘 구조화하지 않으면 코드가 복잡해질 수 있는 위험이 있었습니다.

 

---

✏️ 요약

• Jotai: 상태 관리를 위해 atom을 사용하며, 간단하고 직관적인 API를 제공합니다.
• Context: React의 Context API를 활용해 상태를 컴포넌트 간에 공유하며, Provider가 필요합니다.
• Zustand: 스토어 기반 접근 방식을 제공하여 간단한 메서드로 전역 상태를 관리할 수 있습니다.

 

🤔 Jotai, Context, Zustand 비교하면서 느낀 점

Jotai, Context, Zustand를 비교하며 느낀 점은 각 도구가 가진 특성과 "장단점이 명확하게 다르다."는 것입니다.

1. 사용 용이성의 차이

Jotai는 매우 직관적이고 간단한 API 덕분에 처음 사용하는 데 부담이 적었습니다. 상태를 atom으로 쉽게 정의하고 활용할 수 있어, 빠르게 익힐 수 있었습니다. 반면, Context는 React에 내장된 기능이라 쉽게 접근할 수 있지만, 여러 Context를 중첩하면 복잡해질 수 있다는 점에서 사용이 불편할 수 있었습니다. Zustand는 강력한 성능을 제공하지만, 처음 사용하기에는 약간의 학습이 필요하다는 점이 아쉬웠습니다.

2. 상태 관리의 복잡성

각 도구를 사용하면서 느낀 또 다른 점은 프로젝트 규모에 따라 상태 관리의 복잡성이 증가한다는 것입니다. Jotai는 atom의 수가 많아지면 관리하기 어려워질 수 있고, Context는 여러 컴포넌트가 리렌더링되는 문제로 인해 성능에 부담을 줄 수 있었습니다. Zustand는 성능이 뛰어나지만, 상태 구조가 복잡해지면 코드의 가독성이 떨어질 수 있다는 것을 깨달았습니다.

3. 성능과 확장성

성능 측면에서 Jotai와 Zustand는 유리한 점이 있었습니다. Jotai는 필요한 부분만 리렌더링되는 장점이 있었고, Zustand는 미들웨어 지원으로 더 복잡한 요구사항을 처리할 수 있는 유연함이 있었습니다. Context는 성능 저하가 발생할 수 있는 반면, 간단한 프로젝트에서는 충분히 효과적일 수 있다는 점에서 용도에 맞는 선택이 중요하다는 것을 느꼈습니다.

 

이런 비교 과정을 통해 각 도구가 상황에 따라 어떤 강점을 발휘하는지를 알게 되었고, 앞으로의 프로젝트에서 보다 효과적인 상태 관리 방법을 선택할 수 있는 기준이 생겼습니다. 각 도구의 특성을 이해하고, 프로젝트의 필요에 맞는 선택을 하는 것이 얼마나 중요한지 다시 한 번 느꼈습니다.