상태 관리 방법 비교 총정리

1. Props를 전달해주는 방식 (Props Drilling 이슈)

설명

• 상태를 최상위 부모 컴포넌트에서 자식 컴포넌트를 거쳐 전달하는 방식.
• 간단한 구조에서는 사용 가능하지만, 깊은 컴포넌트 구조에서는 비효율적임.

장점

• 간단하고 설정이 필요 없음.
• React의 기본 기능만으로 구현 가능.

단점

• 컴포넌트 계층이 깊어질수록 관리가 어려워짐.
• 상태 전달이 필요 없는 중간 컴포넌트도 불필요한 리렌더링을 경험할 수 있음.

코드 예시

// 최상위 컴포넌트
function App() {
  const [count, setCount] = React.useState(0);
  return <Parent count={count} setCount={setCount} />;
}

// 중간 컴포넌트
function Parent({ count, setCount }) {
  return <Child count={count} setCount={setCount} />;
}

// 최하위 컴포넌트
function Child({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

---

2. Context API

설명

• React의 내장 기능으로, 컴포넌트 트리에 상태를 전역적으로 전달할 수 있음.
• Provider와 Consumer로 구성되며, 필요한 하위 컴포넌트만 상태에 접근 가능.

장점

• Props Drilling 문제 해결.
• 전역 상태 관리가 가능.

단점

• 대규모 애플리케이션에서는 상태 관리가 복잡해질 수 있음.
• 컴포넌트가 Context에 종속되어 테스트와 재사용성이 어려움.

코드 예시

const CountContext = React.createContext();

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

function Parent() {
  return <Child />;
}

function Child() {
  const { count, setCount } = React.useContext(CountContext);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

---

3. Redux

설명

• 상태를 전역적으로 관리하기 위한 라이브러리.
• 상태는 Store에 저장되고, Reducer로 상태를 업데이트하며, Action을 통해 상태 변경 요청을 보냄.

장점

• 대규모 상태 관리에 적합.
• 상태 변경 흐름이 명확함.

단점

• 초기 설정이 복잡함.
• 코드량이 많아질 수 있음.

코드 예시

// Redux 설정
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Reducer 정의
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

// 컴포넌트
function App() {
  return (
    <Provider store={store}>
      <Child />
    </Provider>
  );
}

function Child() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
}

---

4. Redux Toolkit

설명

• Redux 설정을 간소화한 도구.
• 보일러플레이트 코드를 줄이고, 상태 관리 및 미들웨어 설정을 자동화.

장점

• Redux 대비 간편함.
• 타입스크립트와의 호환성이 좋음.

단점

• 여전히 복잡한 감이 있긴함.

코드 예시

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Slice 생성
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

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

const { increment } = counterSlice.actions;

// 컴포넌트
function App() {
  return (
    <Provider store={store}>
      <Child />
    </Provider>
  );
}

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

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

---

5. Zustand

설명

• 간단하고 경량화된 상태 관리 라이브러리.
• Redux보다 설정이 쉬우며, 전역 상태 관리가 가능.

장점

• 간단한 사용법.
• React 외부에서도 상태 접근 가능.

단점

• 복잡한 상태 관리에는 부적합.

코드 예시

import create from 'zustand';

// 상태 정의
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// 컴포넌트
function App() {
  return <Child />;
}

function Child() {
  const { count, increment } = useStore();

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

---

6. TanStack Query

설명

• 데이터 페칭, 캐싱, 동기화 및 업데이트를 위한 라이브러리.
• 서버 상태 관리에 특화.

사용 시점

• 서버에서 데이터를 가져와야 하며, 캐싱과 동기화가 필요한 경우.
• 대규모 API 통신이 필요할 때.

코드 예시

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function fetchData() {
  return axios.get('https://jsonplaceholder.typicode.com/posts');
}

function App() {
  const { data, isLoading, error } = useQuery(['posts'], fetchData);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error occurred</p>;

  return (
    <div>
      {data.data.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

 

 

다양한 상태 관리 방법을 빠르게 배웠는데 각각의 장단점이 확실한 것 같다. zustand가 확실히 사용하기는 편리했으나 리덕스가 그 기본인만큼 이번 팀 프로젝트에서도 리덕스를 사용하면서 좀 더 확실히 익혀야겠다.