Redux란 무엇인가?
Redux는 자바스크립트 앱에서 상태를 효율적으로 관리하기 위한 라이브러리다. 주로 React와 함께 사용되지만, 다른 라이브러리나 프레임워크에서도 사용 가능하다.
왜 필요한가?
- 중앙 집중적인 상태 관리: 앱의 크기가 커지면 상태 관리가 복잡해진다. Redux는 이를 중앙에서 관리해 해결한다.
- 시간 여행 디버깅: 이전 상태로 쉽게 되돌릴 수 있다.
- 테스트 용이: 상태를 예측 가능하게 관리할 수 있으므로 테스트가 용이하다.
Redux를 이용한 카운터 앱 예시
1. 설치
먼저 프로젝트에 Redux를 설치한다.
npm install redux react-redux
2. Action 정의
Action 객체를 반환하는 함수를 정의한다.
// src/store/actions/counterActions.js
export const increment = () => {
return {
type: "INCREMENT",
};
};3. Reducer 생성
Reducer는 상태와 액션을 받아 새로운 상태를 반환한다.
// src/store/reducers/counterReducer.js
const initialState = 0;
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
export default counterReducer;
4. Root Reducer 만들기
여러 개의 리듀서를 하나로 합치는 Root Reducer를 만든다.
// src/store/reducers/index.js
import { combineReducers } from "redux";
import counterReducer from "./counterReducer";
const rootReducer = combineReducers({
counter: counterReducer,
});
export default rootReducer;5. Store 만들기
Store를 생성하고, React 앱에 연결한다.
// src/main.js
import React from "react";
import ReactDOM from "react-dom/client";
import { createStore } from "redux";
import { Provider } from "react-redux";
import App from "./App";
import rootReducer from "./store/reducers";
const store = createStore(rootReducer);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
6. React 컴포넌트에 연결
react-redux의 useSelector와 useDispatch 훅을 사용한다.
// src/App.js
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment } from "./store/actions/counterActions";
function App() {
const count = useSelector((state) => state.counter);
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>Count: {count}</button>;
}
export default App;이제 리덕스를 통해 상태 관리가 가능하다. useSelector로 상태에 접근할 때 state.counter로 접근하는 것에 주의하자. 이렇게 되는 이유는 combineReducers에서 counter로 설정했기 때문이다.
미들웨어와 비동기 작업
미들웨어를 통해 액션을 디스패치하기 전후로 로직을 넣을 수 있다.
Best Practices
- 액션 타입은 상수로 관리한다.
- 리듀서는 순수 함수여야 한다.
- 복잡한 로직은 미들웨어에서 처리한다.
이것은 Redux의 기본적인 개념과 사용 방법에 대한 소개다. 더 자세한 내용은 공식 문서에서 확인할 수 있다.
FE 리버