리덕스(Redux)는 상태 관리 라이브러리 중 하나로, 리액트 앱의 복잡한 상태를 효율적으로 관리할 수 있습니다.
리덕스를 사용하면, 앱 전역에서 상태를 관리할 수 있으며, 컴포넌트 간의 상태 공유를 용이하게 처리할 수 있습니다.
• 액션 (Action)
상태 변화를 일으키는 객체입니다.
액션 객체는 type 속성과 함께 추가적인 데이터(payload)를 가질 수 있습니다.
• 리듀서 (Reducer)
이전 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.
불변성을 유지해야 하므로, 기존 상태 객체를 변경하지 않고 새로운 객체를 생성하여 반환합니다.
여러 개의 리듀서를 하나의 리듀서로 합치기 위해서는 combineReducers() 함수를 사용합니다.
• 스토어 (Store)
앱의 상태와 리듀서를 포함하고 있는 객체입니다.
상태를 변경하기 위한 유일한 방법은 액션을 디스패치(dispatch)하는 것입니다.
이러한 요소들을 조합하여, 리덕스를 사용하여 리액트 앱의 상태를 관리할 수 있습니다.
1. 앱(App) 구성하기
먼저, 리액트 앱을 구성하기 위해 필요한 패키지들을 설치합니다.
npm install react react-dom redux react-redux2. 스토어(Store) 생성하기
리덕스를 사용하기 위해서는 먼저 스토어를 생성해야 합니다.
스토어는 앱의 상태(state)와 리듀서(reducer)를 포함하고 있습니다.
//src/store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;여기서 createStore() 함수는 레퍼런스로부터 스토어를 생성하며, 첫 번째 인자로는 앱의 리듀서를 전달합니다.
3. 리듀서(Reducer) 생성하기
리듀서는 이전 상태(state)와 액션(action)을 받아서 새로운 상태를 반환하는 함수입니다.
여러 개의 리듀서를 하나의 리듀서로 합치기 위해서는 combineReducers() 함수를 사용합니다.
//src/reducers/index.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
const rootReducer = combineReducers({
counter: counterReducer,
});
export default rootReducer;여기서 combineReducers() 함수는 여러 개의 리듀서를 하나의 리듀서로 합치는 역할을 합니다.
이 때 각 리듀서의 이름을 키(key)로 사용하여 상태를 저장합니다.
//src/reducers/counterReducer.js
const initialState = {
count: 0,
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + action.payload };
case 'DECREMENT':
return { ...state, count: state.count - action.payload };
default:
return state;
}
}
export default counterReducer;여기서 initialState는 초기 상태를 정의한 객체입니다.
리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하므로, 이전 상태가 없을 때 초기 상태를 사용합니다.
4. 액션 생성자(Action Creator) 생성하기
액션 생성자는 액션을 반환하는 함수입니다.
액션은 상태를 변경하는데 사용되는 객체입니다.
액션 생성자를 사용하면 액션을 만드는 코드를 간결하게 작성할 수 있습니다.
//src/actions/counterActions.js
export const increment = (value) => ({
type: 'INCREMENT',
payload: value,
});
export const decrement = (value) => ({
type: 'DECREMENT',
payload: value,
});5. 컴포넌트(Components) 작성하기
컴포넌트에서는 스토어에 접근하여 상태를 변경하거나 상태를 조회할 수 있습니다.
이를 위해서는 react-redux 패키지에서 제공하는 connect() 함수를 사용합니다.
// src/components/Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../actions/counterActions';
function Counter({ count, increment, decrement }) {
return (
<div>
<p>Count: {count}</p>
<button onClick={() => increment(1)}>+</button>
<button onClick={() => decrement(1)}>-</button>
</div>
);
}
const mapStateToProps = (state) => ({
count: state.counter.count,
});
const mapDispatchToProps = {
increment,
decrement,
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
여기서 mapStateToProps() 함수는 스토어의 상태(state)를 컴포넌트의 props로 매핑하는 역할을 합니다.
mapDispatchToProps() 함수는 액션 생성자를 컴포넌트의 props로 매핑하는 역할을 합니다.
connect() 함수는 컴포넌트를 스토어에 연결하는 함수입니다.
이를 통해 컴포넌트가 스토어의 상태를 구독하고, 액션을 디스패치할 수 있게 됩니다.
이제 Counter 컴포넌트에서 버튼을 클릭하면 increment() 혹은 decrement() 액션이 디스패치되어 스토어의 상태가 변경됩니다.
이 때 mapStateToProps() 함수가 호출되어 새로운 상태가 Counter 컴포넌트의 props로 전달됩니다.
이를 통해 Counter 컴포넌트는 변경된 상태를 반영하여 다시 렌더링됩니다.
리액트를 처음 배우는 경우, 러닝 커브가 있겠지만 일주일에서 한 달 이상의 시간이 필요할 수 있습니다.
그러나 이미 리액트를 알고 있다면, 리덕스를 이해하고 적용하는 데는 리액트와 마찬가지로 러닝 커브 이슈가 있겠지만 대략 일주일에서 한 달 이상의 시간이 걸릴 수 있다고 생각합니다.
기술 스택을 익히는 시간은 매우 개인적인 경험과 배경에 따라 다릅니다.
리덕스를 사용하는 프로젝트를 만들어 보는 것이 가장 빠르게 배우는 방법입니다.
개인적으로 리덕스 공식 문서를 읽고, 예제 코드를 작성하고, 팀원 또는 커뮤니티에서 질문을 하면서 공부하는 것이 좋다고 생각합니다.
알아두면 좋은 리덕스 배경지식
