24.06.28 리액트에 리덕스 연결하기

1. 리덕스 라이브러리 설치

yarn add redux react-redux

redux와 react-redux 라이브러리 두개를 한번에 설치한다.

 

2. 모듈, 스토어를 분리해둘 폴더를 생성한다.

 

3. 스토어 파일을 작성한다.

//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의 반환 값을 하나의 상태 객체로 만들어준다.

4. 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(
    //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어준다.
    <Provider store={store}>
        <App />
    </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

왜?는 필요없다. 어떻게 라이브러리를 사용하는지만 알면 된다.

 

5. 모듈생성

// src/modules/counter.js

// 초기 상태값
const initialState = {
    number: 0,
};

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

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

useState를 사용하여 초기값을 입력해주듯이 초기 상태값인 initialState를 설정해준다.

리듀서는 해당 state가 action을 받아 어떻게 변경되는지 설정하는 것이다.

 

6. 스토어에 모듈 연결

import { createStore } from 'redux';
import { combineReducers } from 'redux';
import counter from '../modules/counter';

const rootReducer = combineReducers({
    counter: counter,
});
const store = createStore(rootReducer);

export default store;

export한 counter모듈을 스토어에 불러들여 rootReducer안에 넣어준다.

그리고 store이라는 저장소를 만들어 해당 저장소를 export해준다.

 

7. store에서 값 가져오기

// src/App.js

import React from 'react';
import { useSelector } from 'react-redux'; // import 해주세요.

const App = () => {
    const counterStore = useSelector((state) => state);
    const number = useSelector((state) => state.counter.number);
    console.log(counterStore);
    console.log(number);
    return <div></div>;
};

export default App;

react-redux의 useSelector 메서드를 활용하여 state를 가져온다.

console.log 결과

---

warn

경고문이 콘솔창에 떴다. 이유가 궁금했다. 검색해보니 useSelector으로 가져온 state가 리렌더링을 일으켜 성능저하가 생길 수 있다는 경고였다.

// src/App.js

import React from 'react';
import { useSelector } from 'react-redux'; // import 해주세요.

const App = () => {
    // const counterStore = useSelector((state) => state);
    const number = useSelector((state) => state.counter.number);
    // console.log(counterStore);
    console.log(number);
    return <div></div>;
};

export default App;

state를 그대로 가져와 counterStore이라는 변수에 넣어 사용하다가 state에 들어있는 어떤 값이라도 바뀌게 되면 불필요한 리렌더링이 일어난다.

따라서 state를 가져올 때에는 state에 포함되어있는 요소 중 원하는 값만 가져오는 것이 적절하다.

위에서도 state의 counter모듈에서 number이라는 상태값만 가져와 사용하면 아래와 같이 경고가 발생하지 않는다.