Redux란?
"중앙 state 관리소"를 사용할 수 있게 도와주는 패키지(라이브러리)
- 프론트엔드 개발자들은 redux를 전역 상태 관리 라이브러리라고 많이 표현함
- 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리(패키지)이기 때문
Redux가 필요한 이유
Context API와 Redux에 대해 배우기 전까지는 props로 state를 공유하는 방법을 사용했었다. 그러다보니 개인 과제나 팀프로젝트가 규모가 큰 편이 아님에도 props drilling 현상이 자주 발생했었고, Redux를 사용한 후로는 전과 비교해서 코드의 가독성이 향상되고 유지보수성이 높아지는 걸 느낄 수 있었다. 왜 불편했는지, 왜 사용해야되는지에 대해 밑에서 적어보도록 하겠다.
useState의 불편함
- 컴포넌트에서 컴포넌트로 State를 보내기 위해서는 반드시 부-모 관계가 되어야 한다.
- 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것이다.(조부모 → 부모 → 손자)
- 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.
만약 Redux를 사용한다면?
중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 할 수 있게 된다.
Context API가 있음에도 Redux로 Global state를 관리하면 좋은 이유?
성능 최적화
Context API는 Provider 하위의 모든 컴포넌트를 리렌더링하게 할 수 있다. 반면 Redux는 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트할 수 있어 성능 관리가 용이하다.
상태 로직의 중앙화와 일관성
Redux는 애플리케이션의 상태를 하나의 저장소(store)에 저장한다. 이로 인해 상태 로직이 중앙에서 관리되어 더 일관성 있고 예측 가능한 상태 변경이 가능해진다. 또한, 모든 상태 변경 로직이 리듀서(reducers)에 의해 처리되기 때문에 디버깅과 테스팅이 용이하다.
강력한 미들웨어와 개발 도구
Redux는 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능을 구현할 수 있습니다. 또한 Redux DevTools와 같은 강력한 개발 도구를 통해 상태 변화를 시각적으로 모니터링하고 이전 상태로 롤백하는 등의 기능을 제공한다.
Redux 설정
1. redux 설치
yarn add redux react-redux2-1. 폴더 구조 생성
1. src 폴더 안에 redux 폴더를 생성
2. redux 폴더 안에 modules 폴더를 생성
3. config 폴더 안에 configStore.js 파일을 생성
2-2. 폴더와 파일의 역할
redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더
config : 리덕스 설정과 관련된 파일들을 놓을 폴더
configStore : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일
modules : 우리가 만들 State들의 그룹(폴더)
3. 설정 코드 작성
src/configStore.js
import { createStore } from "redux";
import { combineReducers } from "redux";
const rootReducer = combineReducers({});
const store = createStore(rootReducer);
export default store; index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./redux/config/configStore";
import { Provider } from "react-redux";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
reportWebVitals();4. 모듈 만들기
src/redux/modules/counter.js
// 예시 코드
// 초기 상태값
const initialState = {
number: 0,
};
// 리듀서
const counter = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
// 모듈파일에서는 리듀서를 export default 한다.
export default counter;5. 스토어와 모듈 연결 확인하기
useSelector = 스토어 조회
생성한 모듈을 스토어에 잘 연결했는지 확인하려면 ⭐️컴포넌트에서 스토어를 직접 조회⭐️해야한다.
이때 ⭐️useSelector라는 'react-redux'의 훅을 사용⭐️해야한다.
useSelector 사용법
// 1. store에서 꺼낸 값을 할당 할 변수를 선언
const number =
// 2. useSelector()를 변수에 할당
const number = useSelector()
// 3. useSelector의 인자에 화살표 함수를 넣어줌
const number = useSelector( ()=>{} )
// 4. 화살표 함수의 인자에서 값을 꺼내 return
const number = useSelector((state) => {
console.log(state)
return state
});기존에 있던 코드를 모두 지우고, 아래와 같이 입력
// src/App.js
import React from "react";
import { useSelector } from "react-redux"; // import 해주세요.
const App = () => {
const counterStore = useSelector((state) => state); // 추가해주세요.
console.log(counterStore); // 스토어를 조회해볼까요?
return <div></div>;
}
export default App;