[Next.js 14 강의] 18강 - Redux 또는 Zustand로 상태 관리 확장

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Redux와 Zustand를 사용하여 Next.js 애플리케이션에서 상태 관리를 확장하는 방법을 학습합니다. Context API는 간단한 상태 관리에는 적합하지만, 규모가 커지거나 복잡한 상태 관리가 필요한 경우 Redux나 Zustand 같은 외부 라이브러리를 사용하는 것이 더 효율적입니다. 이 강의에서는 각각의 라이브러리의 사용법과 특징을 비교하며, 실습을 통해 이해를 돕겠습니다.

 

 

1. Redux와 Zustand 소개

 

Redux란?

Redux는 애플리케이션의 상태를 예측 가능한 방식으로 관리하기 위해 설계된 상태 관리 라이브러리입니다. 단일 스토어에서 상태를 관리하고, 액션을 통해 상태를 업데이트하며, 상태의 흐름을 명확하게 유지할 수 있습니다.

반응형

Zustand란?

Zustand는 React에서 사용할 수 있는 경량 상태 관리 라이브러리로, 간단하고 직관적인 API를 제공합니다. Redux에 비해 설정이 간단하고, 불필요한 리렌더링을 줄여 성능적으로도 효율적입니다.

 

 

2. Redux 설정 및 사용법

 

Redux 설정하기

Next.js 프로젝트에서 Redux를 사용하려면 redux와 @reduxjs/toolkit 패키지를 설치합니다.

npm install redux @reduxjs/toolkit react-redux

 

 

Redux의 주요 개념

728x90

· Store: 애플리케이션의 전역 상태를 관리하는 객체입니다.
· Action: 상태에 영향을 주는 지시사항입니다.
· Reducer: 액션에 따라 상태를 어떻게 변경할지 정의하는 함수입니다.
· Slice: Redux Toolkit에서 상태와 리듀서를 정의하는 단위입니다.

 

간단한 Redux 예제

 

1. Slice 생성하기

// features/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

 

 

2. Store 설정하기

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

 

 

3. Provider로 감싸기

// pages/_app.js
import { Provider } from 'react-redux';
import store from '../app/store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

 

 

4. Redux 상태 사용하기

// components/Counter.js
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

 

 

3. Zustand 설정 및 사용법

 

Zustand 설정하기

Zustand는 설치와 설정이 매우 간단합니다.

npm install zustand

 

Zustand의 주요 개념

SMALL

Zustand는 중앙 상태를 정의하는 create 함수를 사용하여 상태와 상태 변경 함수를 생성합니다.

 

간단한 Zustand 예제

 

1. 상태 스토어 생성하기

// stores/counterStore.js
import create from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

 

 

2. 상태 사용하기

// components/Counter.js
import useCounterStore from '../stores/counterStore';

function Counter() {
  const { count, increment, decrement } = useCounterStore();

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

export default Counter;

 

 

 

4. Redux vs Zustand: 어떤 것을 선택할까?

 

Redux의 장점

· 대규모 애플리케이션에서 복잡한 상태 관리를 체계적으로 할 수 있습니다.
· 미들웨어 사용 가능 (e.g., Redux Thunk, Redux Saga).
· 다양한 디버깅 도구와 확장성 있는 에코시스템 제공.

Zustand의 장점

· 설정이 간단하고, 코드량이 적어 빠르게 상태 관리를 시작할 수 있습니다.
· 직관적인 API로 러닝 커브가 낮습니다.
· 불필요한 리렌더링을 방지하여 성능이 우수합니다.

 

언제 Redux를 선택할까?

· 상태가 매우 복잡하거나, 비동기 로직이 많으며, 확장성이 중요한 대규모 프로젝트.
· 미들웨어 사용이 필수적인 경우.

 

언제 Zustand를 선택할까?

· 간단하고 빠른 상태 관리가 필요한 소규모 또는 중소규모 프로젝트.
· 설정이 간단한 상태 관리 라이브러리가 필요할 때.

 

이번 강의에서는 Redux와 Zustand를 활용하여 Next.js 애플리케이션의 상태 관리를 확장하는 방법을 학습했습니다. 각각의 도구가 제공하는 기능과 사용 사례를 이해하고, 프로젝트의 요구사항에 맞는 상태 관리 방법을 선택할 수 있도록 하는 것이 중요합니다.

 

 

 

 

 

- 이전 수업 목록