react에서 상태관리 라이브러리 종류그리고 사용하는 방법은

React에서 상태 관리를 위한 라이브러리는 여러 가지가 있으며, 프로젝트의 규모와 복잡도에 따라 적합한 도구를 선택할 수 있습니다. 아래는 주요 상태 관리 라이브러리와 각 사용법에 대한 설명입니다.

---

1. React의 기본 상태 관리 도구

(1) useState

• React에서 가장 기본적인 상태 관리 훅입니다.
• 컴포넌트 단위로 상태를 관리합니다.

사용법:

 

 

import React, { useState } from 'react';

 

const Counter = () => {

  const [count, setCount] = useState(0);

 

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

};

 

export default Counter;

 

 

 

 

(2) useReducer

• 복잡한 상태 로직을 관리할 때 사용합니다.
• Redux와 유사한 방식으로 상태를 업데이트합니다.

사용법:

 

 

import React, { useReducer } from 'react';

 

const reducer = (state, action) => {

  switch (action.type) {

    case 'increment':

      return { count: state.count + 1 };

    case 'decrement':

      return { count: state.count - 1 };

    default:

      return state;

  }

};

 

const Counter = () => {

  const [state, dispatch] = useReducer(reducer, { count: 0 });

 

  return (

    <div>

      <p>Count: {state.count}</p>

      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>

      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>

    </div>

  );

};

 

export default Counter;

 

 

 

 

---

2. Context API

• React에서 제공하는 전역 상태 관리 도구입니다.
• 컴포넌트 트리 전체에 상태를 전달할 수 있습니다.

사용법:

 

 

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

 

const CountContext = createContext();

 

const CounterProvider = ({ children }) => {

  const [count, setCount] = useState(0);

  return (

    <CountContext.Provider value={{ count, setCount }}>

      {children}

    </CountContext.Provider>

  );

};

 

const Counter = () => {

  const { count, setCount } = useContext(CountContext);

 

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

};

 

const App = () => (

  <CounterProvider>

    <Counter />

  </CounterProvider>

);

 

export default App;

 

 

 

 

---

3. Redux

• 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다.
• 전역 상태를 관리하며, 상태를 예측 가능하게 만듭니다.

사용법:

1. 설치:
2.  

    

   npm install redux react-redux

    

    

    

    
3. 코드:
4.  

    

   import React from 'react';

   import { createStore } from 'redux';

   import { Provider, useSelector, useDispatch } from 'react-redux';

    

   const reducer = (state = { count: 0 }, action) => {

     switch (action.type) {

       case 'increment':

         return { count: state.count + 1 };

       case 'decrement':

         return { count: state.count - 1 };

       default:

         return state;

     }

   };

    

   const store = createStore(reducer);

    

   const Counter = () => {

     const count = useSelector((state) => state.count);

     const dispatch = useDispatch();

    

     return (

       <div>

         <p>Count: {count}</p>

         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>

         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>

       </div>

     );

   };

    

   const App = () => (

     <Provider store={store}>

       <Counter />

     </Provider>

   );

    

   export default App;

    

    

    

    

---

4. Redux Toolkit

• Redux의 보일러플레이트 코드를 줄이기 위해 만들어진 도구입니다.
• Redux의 공식 권장 도구입니다.

사용법:

1. 설치:
2.  

    

   npm install @reduxjs/toolkit react-redux

    

    

    

    
3. 코드:
4.  

    

   import React from 'react';

   import { configureStore, createSlice } from '@reduxjs/toolkit';

   import { Provider, useSelector, useDispatch } from 'react-redux';

    

   const counterSlice = createSlice({

     name: 'counter',

     initialState: { count: 0 },

     reducers: {

       increment: (state) => { state.count += 1; },

       decrement: (state) => { state.count -= 1; },

     },

   });

    

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

    

   const Counter = () => {

     const count = useSelector((state) => state.count);

     const dispatch = useDispatch();

    

     return (

       <div>

         <p>Count: {count}</p>

         <button onClick={() => dispatch(counterSlice.actions.increment())}>Increment</button>

         <button onClick={() => dispatch(counterSlice.actions.decrement())}>Decrement</button>

       </div>

     );

   };

    

   const App = () => (

     <Provider store={store}>

       <Counter />

     </Provider>

   );

    

   export default App;

    

    

    

    

---

5. MobX

• 상태를 관찰 가능한(observable) 객체로 관리하며, 상태가 변경되면 자동으로 UI를 업데이트합니다.

사용법:

1. 설치:
2.  

    

   npm install mobx mobx-react-lite

    

    

    

    
3. 코드:
4.  

    

   import React from 'react';

   import { makeAutoObservable } from 'mobx';

   import { observer } from 'mobx-react-lite';

    

   class CounterStore {

     count = 0;

    

     constructor() {

       makeAutoObservable(this);

     }

    

     increment() {

       this.count += 1;

     }

    

     decrement() {

       this.count -= 1;

     }

   }

    

   const counterStore = new CounterStore();

    

   const Counter = observer(() => (

     <div>

       <p>Count: {counterStore.count}</p>

       <button onClick={() => counterStore.increment()}>Increment</button>

       <button onClick={() => counterStore.decrement()}>Decrement</button>

     </div>

   ));

    

   const App = () => <Counter />;

    

   export default App;

    

    

    

    

---

6. Recoil

• Facebook에서 개발한 상태 관리 라이브러리로, React와의 통합이 매우 간단합니다.

사용법:

1. 설치:
2.  

    

   npm install recoil

    

    

    

    
3. 코드:
4.  

    

   import React from 'react';

   import { RecoilRoot, atom, useRecoilState } from 'recoil';

    

   const countState = atom({

     key: 'countState',

     default: 0,

   });

    

   const Counter = () => {

     const [count, setCount] = useRecoilState(countState);

    

     return (

       <div>

         <p>Count: {count}</p>

         <button onClick={() => setCount(count + 1)}>Increment</button>

         <button onClick={() => setCount(count - 1)}>Decrement</button>

       </div>

     );

   };

    

   const App = () => (

     <RecoilRoot>

       <Counter />

     </RecoilRoot>

   );

    

   export default App;

    

    

    

    

---

7. Zustand

• 경량 상태 관리 라이브러리로, 간단한 상태 관리에 적합합니다.

사용법:

1. 설치:
2.  

    

   npm install zustand

    

    

    

    
3. 코드:
4.  

    

   import create from 'zustand';

    

   const useStore = create((set) => ({

     count: 0,

     increment: () => set((state) => ({ count: state.count + 1 })),

     decrement: () => set((state) => ({ count: state.count - 1 })),

   }));

    

   const Counter = () => {

     const { count, increment, decrement } = useStore();

    

     return (

       <div>

         <p>Count: {count}</p>

         <button onClick={increment}>Increment</button>

         <button onClick={decrement}>Decrement</button>

       </div>

     );

   };

    

   export default Counter;

    

    

    

    

---

8. 상태 관리 라이브러리 비교

라이브러리특징사용 사례

useState	컴포넌트 단위 상태 관리. 간단한 상태 관리에 적합.	소규모 상태 관리.
Context API	전역 상태 관리. React 내장 도구로 추가 설치 불필요.	간단한 전역 상태 관리.
Redux	복잡한 상태 관리. 예측 가능한 상태 흐름.	대규모 애플리케이션.
Redux Toolkit	Redux의 보일러플레이트를 줄인 공식 도구.	Redux를 사용하는 모든 프로젝트.
MobX	관찰 가능한 상태 관리. 자동화된 상태 업데이트.	반응형 데이터 관리.
Recoil	React와의 통합이 간단. Facebook에서 개발.	React 전용 상태 관리.
Zustand	경량 상태 관리. 간단한 API.	소규모 프로젝트 또는 간단한 상태 관리.

---

결론

• 소규모 프로젝트: useState, Context API, Zustand.
• 대규모 프로젝트: Redux, Redux Toolkit, MobX.
• React 전용 상태 관리: Recoil.
• 프로젝트의 복잡도와 요구사항에 따라 적합한 도구를 선택하세요.