React - Redux (1)

Redux 소개

1. 리덕스란 무엇일까?

우리는 이전까진 useState를 호출해서, props로 state를 넘겨주는 방식을 사용하였다. 최상위 컴포넌트와 중간 컴포넌트 그리고 최하위 컴포넌트가 있을 때, 최상위 컴포넌트에서 최하위 컴포넌트에 props를 전달해주기 위해선 중간 컴포넌트는 그 값이 필요 없어도 불필요하게 거쳐야 했다.
이런 불편함을 해결해줄 도구가 바로 Redux이다.

Redux는 전역 상태관리 라이브러리이다.

Redux는 중앙 state 관리소를 갖고 있으며, 모든 state는 여기서 생성된다.

Redux를 사용하면

• state를 공유하고자 할 때 부-모 관계가 아니어도 되고,
• 중간에 의미없이 컴포넌트를 거칠 필요 역시 없다.
• 또한 자식 컴포넌트에서 만든 state를 부모 컴포넌트에서도 사용할 수 있다.

2. 리덕스 설정

패키지 설치

리액트에서 리덕스를 사용하기 위해선 2개의 패키지를 설치해야 한다.

yarn add redux react-redux

react-redux는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지이다.

설정 코드 작성

src/redux/config : 리덕스 설정 관련 파일 넣는 곳
src/redux/config/configStore.js : 중앙 state관리소
src/redux/modules : state의 그룹

configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({모듈이 들어간다.}); 
const store = createStore(rootReducer); 

export default store; 

1. createStore()
   리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수)
   리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없다.

2. combineReducers()
   리덕스는 action —> dispatch —> reducer 순으로 동작하는데,
   이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생한다.
   combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어준다.

최상위 index.jsx

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>
    <Provider store={store}>
    <App />
    </Provider>
    </>
);

3. 모듈 만들기

모듈은 state의 그룹이다. 간단한 예제로 이전에 useState로 만들었던 카운터 프로그램을 리덕스로 다시 만들어보자!

modeules/counter.js

const initialState = {
	number: 0,
}

const counter = (state = initialState, action) =>{
	switch (action.type){
    	default:
        	return state;
    }
};

export default counter;

initialState
initialState엔 초기 상태값이 들어간다.

const [number, setNumber] = useState(0);

useState를 사용했을 때 위와 같은 의미이다.

Reducer
counter를 선언한 부분이 리듀서이다.
리듀서는 변화를 일으키는 함수이다.

리듀서에게 필요한 기능을 요청하면 리듀서는 그 기능을 해준다.

리듀서의 인자에 대해선 다음 포스팅에서 다룰 예정이다.
configStore.js

...
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
...

위와 같이 코드를 추가하면, 스토어와 모듈이 연결된다.
그렇다면 이제 잘 연결됐는지 확인해보자!

스토어와 모듈 연결 확인하기

const number = useSelector((state) => {
	console.log(state)
	return state
});

App.jsx

import { useSelector } from "react-redux"; 

const App = () => {
  const counterStore = useSelector((state) => state); 
  console.log(counterStore); // 스토어 조회

  return <div></div>;
}

export default App;

우리는 컴포넌트에서 스토어를 조회할 때 react-redux에서 제공하는 useSelector라는 훅을 사용한다‼️

이제 우리는 어떤 컴포넌트에서도 접근 할 수 있는 스토어를 갖게 되었다. 문약 우리가 컴포넌트에서 number라는 값을 사용하고자 한다면 아래와 같이 사용하면 된다.

const number = useSelector(state => state.counter.number);