Redux에 대해 알아보자
안녕하세요! 오늘은 자바스크립트 애플리케이션에서 상태 관리를 위해 자주 사용되는 Redux에 대해 알아보겠습니다. Redux는 애플리케이션 상태를 효율적으로 관리하고 예측 가능하게 만들어 주는 라이브러리입니다. 그럼 바로 시작하겠습니다.
Redux란 무엇인가?
Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 예측 가능한 상태 컨테이너입니다. React, Angular, Vue와 같은 다양한 프레임워크와 라이브러리에서 사용할 수 있습니다. Redux는 애플리케이션의 모든 상태를 중앙 저장소(Store)에 저장하고, 상태 변화를 일으키는 액션(Action)과 리듀서(Reducer)를 통해 상태를 관리합니다.
Redux의 주요 개념
1. 상태(State)
상태는 애플리케이션에서 관리되는 모든 데이터와 상태를 나타냅니다. Redux에서는 애플리케이션의 전체 상태를 하나의 JavaScript 객체로 관리합니다.
2. 액션(Action)
액션은 상태를 변경하기 위한 의도를 나타내는 단일 객체입니다. 액션 객체는 type 속성을 가지고 있으며, 추가적으로 상태 변경에 필요한 데이터를 포함할 수 있습니다.
1
2
3
4
5
6
const addAction = {
type: 'ADD_ITEM',
payload: {
item: 'Apple'
}
};
3. 리듀서(Reducer)
리듀서는 액션을 처리하여 새로운 상태를 반환하는 함수입니다. 현재 상태와 액션을 인수로 받아, 새로운 상태를 반환합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const initialState = {
items: []
};
function itemReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_ITEM':
return {
...state,
items: [...state.items, action.payload.item]
};
default:
return state;
}
}
4. 스토어(Store)
스토어는 애플리케이션의 상태를 관리하는 객체입니다. 스토어는 리듀서를 통해 상태를 관리하며, 상태를 읽고 업데이트할 수 있는 메서드를 제공합니다.
1
2
3
import { createStore } from 'redux';
const store = createStore(itemReducer);
Redux의 동작 흐름
Redux의 동작 흐름은 다음과 같습니다:
- 액션(Action): 상태 변경을 요청하는 액션 객체가 생성됩니다.
- 디스패치(Dispatch): 액션 객체가 스토어로 디스패치됩니다.
- 리듀서(Reducer): 스토어는 리듀서를 호출하여 현재 상태와 액션을 전달합니다. 리듀서는 새로운 상태를 반환합니다.
- 상태 업데이트(State Update): 스토어는 리듀서가 반환한 새로운 상태로 업데이트됩니다.
- 구독(Subscription): 상태가 업데이트되면, 애플리케이션은 상태 변화를 감지하고 UI를 업데이트합니다.
예제: 아이템 추가 애플리케이션
이제 간단한 아이템 추가 애플리케이션을 만들어 보겠습니다.
1. 액션 생성자
액션 생성자는 액션 객체를 반환하는 함수입니다.
1
2
3
4
5
6
7
8
function addItem(item) {
return {
type: 'ADD_ITEM',
payload: {
item
}
};
}
2. 리듀서
리듀서는 상태와 액션을 인수로 받아 새로운 상태를 반환합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const initialState = {
items: []
};
function itemReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_ITEM':
return {
...state,
items: [...state.items, action.payload.item]
};
default:
return state;
}
}
3. 스토어 생성
스토어를 생성하여 애플리케이션 상태를 관리합니다.
1
2
3
import { createStore } from 'redux';
const store = createStore(itemReducer);
4. 상태 변경
액션을 디스패치하여 상태를 변경합니다.
1
2
3
4
5
store.dispatch(addItem('Apple'));
store.dispatch(addItem('Banana'));
console.log(store.getState());
// 출력: { items: ['Apple', 'Banana'] }
Redux와 React 통합
React 애플리케이션에서 Redux를 사용하려면 react-redux 패키지를 사용합니다. 이 패키지는 Redux 스토어를 React 컴포넌트에 연결하는 편리한 방법을 제공합니다.
1. 설치
1
npm install redux react-redux
2. 프로바이더 설정
Provider 컴포넌트를 사용하여 Redux 스토어를 React 애플리케이션에 제공합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import itemReducer from './reducers';
import App from './App';
const store = createStore(itemReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
3. React 컴포넌트에서 Redux 사용
React 컴포넌트에서 useSelector와 useDispatch 훅을 사용하여 Redux 상태와 액션을 연결할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './actions';
function App() {
const items = useSelector(state => state.items);
const dispatch = useDispatch();
const handleAddItem = () => {
const item = prompt('Enter an item:');
dispatch(addItem(item));
};
return (
<div>
<h1>Items</h1>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<button onClick={handleAddItem}>Add Item</button>
</div>
);
}
export default App;
결론
Redux는 자바스크립트 애플리케이션에서 상태 관리를 체계적이고 예측 가능하게 해주는 강력한 도구입니다. 액션, 리듀서, 스토어의 개념을 이해하고, 이를 통해 상태를 관리하는 방법을 익히면 복잡한 애플리케이션에서도 효율적으로 상태를 관리할 수 있습니다. React와 Redux를 통합하면 더 나은 코드 구조와 유지보수성을 제공할 수 있습니다.
오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.