[JavaScript 문법] 46일차: React 상태 관리

Redux란?

Redux는 애플리케이션의 상태를 예측 가능하게 관리하기 위한 상태 관리 라이브러리입니다. Redux는 주로 React 애플리케이션과 함께 사용되지만, 다양한 JavaScript 애플리케이션에서도 활용될 수 있습니다. Redux의 주요 개념으로는 상태(state), 액션(action), 리듀서(reducer), 스토어(store) 등이 있습니다.

Redux의 주요 개념

1. 상태(state): 애플리케이션의 상태를 나타내는 객체입니다.
2. 액션(action): 상태를 변경하기 위한 명령을 담고 있는 객체입니다.
3. 리듀서(reducer): 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.
4. 스토어(store): 애플리케이션의 상태를 관리하는 객체로, 상태를 읽고 액션을 디스패치할 수 있습니다.

Redux 설치

Redux를 사용하기 위해 필요한 패키지를 설치합니다.

npm install redux react-redux

상태와 액션

상태는 애플리케이션의 현재 상태를 나타내며, 액션은 상태를 변경하기 위한 명령을 나타냅니다.

예제: 액션 정의

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

리듀서

리듀서는 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.

예제: 리듀서 정의

// reducers.js
const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

스토어 설정

스토어는 애플리케이션의 상태를 관리하는 객체로, 상태를 읽고 액션을 디스패치할 수 있습니다.

예제: 스토어 설정

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

export default store;

React에서 Redux 사용

React 애플리케이션에서 Redux를 사용하기 위해 Provider 컴포넌트를 사용하여 스토어를 React 컴포넌트 트리에 제공해야 합니다.

예제: React에서 Redux 사용

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

예제: 컴포넌트에서 Redux 상태 사용

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector(state => state.count);
  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;

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <h1>React Redux Counter</h1>
      <Counter />
    </div>
  );
};

export default App;

Redux DevTools

Redux DevTools는 상태와 액션을 시각적으로 디버깅할 수 있는 도구입니다. Redux DevTools를 사용하기 위해 composeWithDevTools를 설치하고 스토어 설정에 추가합니다.

예제: Redux DevTools 설정

npm install redux-devtools-extension

// store.js
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import counterReducer from './reducers';

const store = createStore(counterReducer, composeWithDevTools());

export default store;

결론

Redux는 애플리케이션의 상태를 예측 가능하게 관리할 수 있는 강력한 도구입니다. 이번 글에서는 Redux의 기본 개념, 상태와 액션, 리듀서, 스토어 설정, React에서 Redux 사용, Redux DevTools 설정에 대해 배웠습니다. 다음 글에서는 Vuex 상태 관리에 대해 알아보겠습니다.

다음 글에서 만나요!