리덕스의 기본 컴포넌트 개념과 사용 방법
리덕스의 기본 컴포넌트 개념과 사용 방법
이번 포스팅에서는 Redux의 핵심 개념인 스토어(Store), 액션(Action), **리듀서(Reducer)**를 설명하고, 이를 어떻게 사용하는지 실습 예제와 함께 알아보겠습니다. Redux는 React 애플리케이션에서 상태 관리를 효율적으로 처리할 수 있는 라이브러리로, 이 포스팅을 통해 Redux의 기본 구조와 활용법을 이해할 수 있습니다.
1. 리액트 애플리케이션 생성 및 Redux 설치하기
먼저 React 애플리케이션을 생성하고 Redux를 설치하는 방법을 알아보겠습니다.
- React 애플리케이션 생성
npx create-react-app my-redux-app cd my-redux-app - Redux 및 Redux Toolkit 설치 Redux와 Redux Toolkit을 설치합니다. Redux Toolkit은 Redux의 사용을 더 간단하게 만들어주는 도구입니다.
npm install @reduxjs/toolkit react-redux
2. 리덕스의 주요 개념
Redux는 다음과 같은 주요 개념을 중심으로 상태를 관리합니다:
- 스토어(Store): 애플리케이션의 상태(state)를 보관하는 단일 저장소입니다. 모든 상태는 스토어에 저장되며, 이를 통해 상태를 중앙에서 관리할 수 있습니다.
- 액션(Action): 상태에 어떤 변화가 필요한지를 설명하는 객체입니다. 액션에는 일반적으로 type 속성과 추가 데이터를 포함하는 payload가 있습니다.
- 리듀서(Reducer): 현재의 상태와 액션을 바탕으로 새로운 상태를 반환하는 순수 함수입니다. 리듀서는 상태를 어떻게 변경할지 정의하며, 상태 변경의 논리를 담당합니다.
이제 각각의 개념을 더 깊이 살펴보고 예제를 통해 어떻게 사용하는지 알아보겠습니다.
3. 스토어(Store) 생성하기
스토어는 Redux 상태를 저장하는 중앙 저장소입니다. 스토어를 생성하기 위해서는 createStore 함수를 사용합니다. Redux Toolkit을 사용하면 configureStore를 통해 더 간단히 설정할 수 있습니다.
예제 코드:
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './features/user/userSlice';
const store = configureStore({
reducer: {
user: userReducer,
},
});
export default store;이 코드에서 스토어는 userReducer를 포함하여 생성됩니다. 이 스토어는 애플리케이션 전체에서 상태를 관리하는 역할을 합니다.
4. 액션(Action) 정의하기
액션은 상태에 어떤 변화가 필요한지를 설명하는 객체입니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 카운터가 증가하는 액션을 정의해 보겠습니다.
// src/features/counter/counterActions.js
export const increment = () => {
return {
type: 'INCREMENT',
};
};
export const decrement = () => {
return {
type: 'DECREMENT',
};
};액션은 상태를 직접 변경하지 않으며, 상태 변경 요청을 설명하는 역할을 합니다. type 속성은 액션의 종류를 나타내며, 리듀서에서 이 값을 사용해 상태를 변경합니다.
5. 리듀서(Reducer) 정의하기
리듀서는 액션에 따라 상태를 변경하는 순수 함수입니다. 리듀서는 현재 상태와 액션을 입력으로 받아 새로운 상태를 반환합니다.
예제 코드:
// src/features/counter/counterReducer.js
const initialState = {
count: 0,
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
case 'DECREMENT':
return {
...state,
count: state.count - 1,
};
default:
return state;
}
};
export default counterReducer;리듀서에서 switch 문을 사용해 어떤 액션이 디스패치 되었는지 확인하고, 상태를 업데이트합니다. 이처럼 리듀서는 애플리케이션의 상태 변경을 담당합니다.
6. 컴포넌트에서 Redux 사용하기
React 컴포넌트에서 Redux 상태를 사용하기 위해서는 useSelector와 useDispatch 훅을 사용합니다.
- useSelector: 스토어에서 상태를 선택하여 사용할 수 있도록 해주는 훅입니다.
- useDispatch: 액션을 디스패치할 수 있도록 해주는 훅입니다.
예제 코드:
// src/components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterActions';
function Counter() {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}
export default Counter;이 예제에서는 useSelector를 사용해 스토어에서 count 값을 가져오고, useDispatch를 사용해 increment 및 decrement 액션을 디스패치합니다.
7. 전체 구조 연결하기
마지막으로, 스토어를 React 애플리케이션에 제공하기 위해 Provider 컴포넌트를 사용합니다. 이를 통해 애플리케이션 내의 모든 컴포넌트가 Redux 스토어에 접근할 수 있게 됩니다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './app/store';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);Provider를 사용해 스토어를 애플리케이션에 연결함으로써 모든 컴포넌트가 상태를 쉽게 관리할 수 있습니다.
요약
- **스토어(Store)**는 상태를 중앙에서 관리하는 저장소입니다.
- **액션(Action)**은 상태에 변화를 요구하는 객체입니다.
- **리듀서(Reducer)**는 액션에 따라 상태를 변경하는 순수 함수입니다.
- useSelector와 useDispatch를 사용해 React 컴포넌트에서 Redux 상태를 사용할 수 있습니다.
- Provider를 통해 스토어를 React 애플리케이션에 연결할 수 있습니다.
이 포스팅을 통해 Redux의 기본 컴포넌트와 그 사용법을 이해하고, 실습 예제를 통해 직접 적용해 볼 수 있습니다. 추가적으로 궁금한 사항이나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요!