Redux

Redux가 필요한 이유

컴포넌트 간의 데이터를 주고 받을 때 우리는 props를 떠올린다.

props는 상위 컴포넌트에서 하위 컴포넌트 방향으로 흘러가게 되어있는데, 이런 성격을 가지고 있어서 props drilling이라는 문제를 겪을 수 있다.

• props drilling
  깊이가 깊은 컴포넌트 트리구조를 가진 프로젝트가 있다고 가정하자. 이때, 가장 상위 컴포넌트에 있는 state값을 깊은 하위 컴포넌트가 사용하고자 하면 중간에 끼어있는 컴포넌트들이 계속해서 props를 사용하지 않아도 보내줘야한다. 이렇게 되면 코드 가독성이나 유지 보수성이 떨어지게 되는 문제가 생기게 된다.

이런 props drilling의 문제를 보고 react의 데이터의 흐름을 더욱 효과적으로 파악하기 쉽게 하기 위해 생긴 것이 redux이다.

Context API가 있는데 Redux?

Context API 또한 전역 state를 만들어서 data를 관리할 수 있는데 왜 redux가 필요한 것일까?

1. 성능 최적화
   Context API를 사용하기 위해서 전역으로 관리할 가장 상위 컴포넌트에 Provider를 사용해서 밑에 있는 모든 컴포넌트를 리렌더링 하게 하기 때문에 성능을 최적화 할 수 없다.
2. state 로직의 중앙화와 일관성
   Redux는 state를 하나의 저장소인 store에 저장해서 state 로직이 중앙에서 관리되기 때문에 일관성이 있어서 디버깅과 테스팅에 용이하다.
3. 강력한 미들웨어와 개발 도구
   Redux는 다양한 미들웨어를 지원해서 비동기 작업, 로깅, 상태 변경에 대한 복잡한 기능을 구현할 수 있다.

Global state 와 Local state

Local State
컴포넌트 안에서 useState로 생성한 state

Global State
중앙 state 관리소(redux에선 store)에서 생성한 state

Redux란

중앙 state 관리소를 사용할 수 있게 도와주는 패키지(라이브러리)이다.

Redux 사용법

폴더 구조

redux
 ├─ config
 │ 		└─ store 이름.js
 └─ modules
 		└─ module 이름.js

store

1. rootReducer 생성

	const rootReducer = combineReducers({
    	//여기에 생성한, 사용할 모듈을 넣음
    });

2. store 생성

	const store = createStore(rootReducer);

3. store를 내보냄

	export default store;

4. index.js에 Provider 추가

	<Provider store={store}>
      <App />
    </Provider>

module

1. 초기값 객체 만들기

	const initialState = {
    	number: 0, //예시
    }

2. reducer(함수) 만들기

	const counter = (state = initialState, action) => {
    	switch(action.type) {
          case "PLUS_NUM":
            return state + 1;
            break;
          default:
            return state;
            break;
        }
    }

3. 컴포넌트 안에 import

	const counterReducer = useSelector((state)=>{
    	return state;
    });

useSelector를 이용해서 만든 모듈안의 state값을 가져온다.