Redux는 결국 새로운 플랜

-이해 못한 박감자-

Redux 탄생 배경

props drilling으로 인한 복잡도와 유지보수가 어려워지면서 상태관리를 좀 더 쉽고 한 번에 할 수 있는 도구가 필요했다.

평소에는 부모 컴모넌트에서 자식에게 전달하고 또 그 자식의 자식 컴포넌트에게 전달하고 수 없이 전달하다 보면, 이 props가 누구에게로부터 받은 props고, 오류가 생기면 어디서 고쳐야 하며 등등 프로젝트가 커질 수록 문제가 복잡하다.

따라서, 상태와 props 모두 한 번에 관리하는, 부-모 관계 거치지 않고 전달하는 도구가 바로 Redux이다

Global state & Local State

• Local State : useState으로 직접 컴포넌트 내부에서 생성한 state
• Global State : 중앙 State 관리소에서 관리하는 state 어느 컴포넌트에 종속되지 않으며 중안 Store (State 관리소)에서 관리가 된다.

Context API가 있는데?

React에서 자체로 만든 관리 도구인 Context API, 이도 물론 유용한 도구이다. 하지만 Context API만으로만 대규모 프로젝트를 관리하는 것에는 제한이 있다.

1. 성능 최적화 : Context API Provider 하위의 모든 컴포넌트를 리렌더링하게 되는데, 관련된 모드 컴포넌트가 필요 상황이 아님에도 리렌더링 될 수 있다.
   >>Redux는 상태 변경시 관련된 컴포넌트만 리렌더링 되게끔 관리가 가능하다

2. 상태 로직 중앙화/일관성
   Redux는 상태를 모두 Store에 저장해서, 상태 관리 로직이 중앙에서 관리됩니다. 또한 상태 변경 로직이 Reducers에 의해 처리되기 때문에 디버깅과 테스팅에 용이합니다.

3. Midleware & 개발 도구
   Redux는 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능을 구현 할 수 있다. 또한 Redux DevTools 같은 개발 도구를 통해 상태 변화를 시각적으로 모니터링하고 이전 상태로 롤백하는 등의 기능을 제공한다.

Redux란

중앙 관리소 패키지 (라이브러리)로 설치해서 사용하면 용이하다

사용법

설치 방법은 터미널에서 아래 코드를 실행 시키면 된다.

yarn add redux react-redux

파일 경로와 사용법

// src/redux/config/configStore.js
import { combineReduces, createStore } from "redux";

// 1) rootReduce 생성
const rootReducer = combineReducers({});

// 2) store를 생성
const store = createStore(rootReducer);

// 3) 만든 store 내보내기
export default store;

main.jsx에서 App을 Redux Provider로 감싸주기

//...
import { Provider } from "react-redux";
import store from "./redux/config/configStore.js";

ReactDom.createRoot(document.getElementById("root")).render(
	<StrictMode>
    	<Provider store={store}>
        	<App />
    	</Provider>
    </StrictMode>
);

관련 모듈 생성하기 예시 counter.js

// src/redux/modules/counter.js
const initialState = {
	number: 0,
}

// 리듀서 (함수)
const counter = (state=initialState, action) => {
	switch (action.type) {
      	default:
      		return state;	// 리듀서 함수는 반드시 return 존재함
    }
}

export default counter;

action은 type이라는 키를 가지고 있는 객체로 우선 인지하고 있으면 된다.

그러면 이제 counter를 configStore에 추가해준다

// src/redux/config/configStore.js
import { combineReduces, createStore } from "redux";
import counter from "../modules/counter";	// import!

// 1) rootReduce 생성
const rootReducer = combineReducers({
	counter,	// 추가한 counter
});

// 2) store를 생성
const store = createStore(rootReducer);

// 3) 만든 store 내보내기
export default store;

이제 App에서 한 번 불러보자

// src/App.jsx
import { useSelector } from "react-redux";

const App = () => {
	const counterReducer = useSelector((state) => {
    	return state.counter;
    });
  	console.log(counterReduce);	// 연결 확인! counter {number: 0} 이 잘 나온다
  
  	return <div>App</div>;
}

마치며...

간단한 사용법까지 정리 완.
이해는 미완.