Redux는 React 애플리케이션의 상태 관리를 위한 JavaScript 라이브러리입니다. Redux는 예측 가능하고 디버그하기 쉬운 애플리케이션을 만들 수 있게 해주는 상태 컨테이너이며, React와 함께 사용할 때 매우 강력한 도구입니다.
이를 통해 애플리케이션의 상태를 중앙 집중식으로 관리하고, 상태의 변경을 예측 가능한 방식으로 처리할 수 있습니다.
Redux의 주요 개념
Store: Redux의 핵심이자 단일 소스 오브 진리입니다. 애플리케이션의 상태가 저장되는 곳이며, 상태를 변경하는 유일한 방법은 액션을 디스패치(dispatch)하여 스토어에 전달하는 것뿐입니다.
Action: 애플리케이션에서 일어나는 어떤 이벤트를 설명하는 객체입니다. 일반적으로 상태를 변경하기 위해 디스패치되며, 이를 통해 스토어에 데이터를 보낼 수 있습니다.
Reducer: 액션에 따라 상태를 변경하는 순수한 함수입니다. 현재 상태와 액션을 전달받아 새로운 상태를 반환합니다.
Dispatch: 액션을 스토어로 보내는 것을 말합니다. 이를 통해 상태를 변경할 수 있습니다.
Selector: 스토어의 상태에서 특정 데이터를 추출하는 함수입니다. Redux의 스토어는 단일 객체이므로, 복잡한 데이터 구조에서 필요한 부분만 선택하여 사용할 수 있도록 도와줍니다.
React Redux 사용하기
설치: React Redux를 설치합니다.
npm install react-redux
스토어 생성: Redux 스토어를 생성합니다.
import { createStore } from 'redux';
import rootReducer from './reducers'; // 루트 리듀서
const store = createStore(rootReducer);Provider 제공: 애플리케이션의 최상위 컴포넌트에 Redux 스토어를 제공합니다.
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);컨테이너 컴포넌트 생성: Redux와 연결된 컨테이너 컴포넌트를 생성합니다.
import { connect } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = ({ count, increment, decrement }) => (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
const mapStateToProps = state => ({
count: state.count
});
export default connect(mapStateToProps, { increment, decrement })(Counter);다음은 간단한 카운터 애플리케이션의 예제입니다.
// actions.js
export const increment = () => ({
type: 'INCREMENT'
});
export const decrement = () => ({
type: 'DECREMENT'
});// reducers.js
const initialState = {
count: 0
};
const rootReducer = (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 rootReducer;// app.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import Counter from './Counter';
const store = createStore(rootReducer);
const App = () => (
<Provider store={store}>
<div>
<h1>React Redux Counter Example</h1>
<Counter />
</div>
</Provider>
);
export default App;이제 Redux를 사용하여 React 애플리케이션의 상태를 효과적으로 관리할 수 있습니다. 이 예제를 통해 React Redux의 기본 개념과 사용법을 이해할 수 있을 것입니다.
Leave a Reply