Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 상태 관리 라이브러리입니다.
Redux를 사용하면 애플리케이션의 상태를 예측 가능하게 만들고, 상태의 변화를 추적하고, 상태를 쉽게 업데이트할 수 있습니다.
Redux는 React와 함께 사용되는 것이 일반적이지만 다른 라이브러리나 프레임워크에서도 사용할 수 있습니다.
Redux의 주요 개념은 다음과 같습니다:
스토어 (Store)
- 애플리케이션의 상태를 포함하고 있는 객체입니다.
스토어에는 상태의 값이 들어 있습니다.
액션 (Action)
- 상태를 변경하는데 필요한 정보를 가지고 있는 객체입니다.
액션은 주로 어떤 종류의 변화가 일어났는지 설명하는 문자열 형태의 type 속성을 가지고 있습니다.
리듀서 (Reducer)
- 현재의 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.
리듀서는 순수 함수여야 하며 이전 상태를 변경하지 않아야 합니다.
디스패치 (Dispatch)
- 액션을 스토어에 보내는 것을 의미합니다.
액션을 디스패치하면 스토어는 현재의 상태와 액션을 리듀서에게 전달하여 새로운 상태를 생성합니다.
구독 (Subscribe)
- 스토어의 상태가 변경될 때마다 특정 함수를 호출하는 것을 의미합니다.
이를 통해 상태 변화에 대응할 수 있습니다.
아래에 Redux의 간단한 코드 예시를 제공합니다.
- 설치 및 설정
먼저, 프로젝트에 Redux를 설치합니다.
npm install redux react-redux
- Redux 스토어 생성
// src/store.js
import { createStore } from 'redux';
const initialState = {
count: 0
};
function reducer(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;
}
}
const store = createStore(reducer);
export default store;- 액션 정의
// src/actions.js
export const increment = () => {
return {
type: 'INCREMENT'
};
};
export const decrement = () => {
return {
type: 'DECREMENT'
};
};- 리액트 컴포넌트에서 사용
// src/App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';
function App(props) {
return (
<div>
<h1>Count: {props.count}</h1>
<button onClick={props.increment}>Increment</button>
<button onClick={props.decrement}>Decrement</button>
</div>
);
}
const mapStateToProps = state => {
return {
count: state.count
};
};
export default connect(mapStateToProps, { increment, decrement })(App);이 예시에서는 간단한 카운터 앱을 만들었습니다.
redux 패키지를 사용하여 스토어를 생성하고, 액션을 정의하였습니다.
그리고 리액트 컴포넌트에서 스토어의 상태를 사용하고 액션을 디스패치하기 위해 react-redux의 connect 함수를 사용했습니다.
