[react] react-redux

https://www.youtube.com/watch?v=3zoIigieur0&list=RDCMUCbGZKLIHpox2l0whz6_RYyg&start_radio=1&rv=3zoIigieur0&t=338
🔺 위 영상을 보고 큰 도움을 받았다!

🟣 react-redux 사용 과정

rearc-redux 라이브러리의 useSelector, useDispatch를 사용하여 redux를 이용하는 아주 간단한 카운터 예시를 통해 원리와 개념을 이해해보자.

1. react app 생성 및 redux, react-redux 설치

create-react-app을 이용해 react app을 생성하고, redux, react-redux를 설치한다.

npm install redux react-redux

2. react app에 store 연동

index.js 에서 store를 생성해주고, Provider 컴포넌트로 App 컴포넌트를 감싸 props로 store를 넘겨준다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers/rootReducer'

// 최상단 index.js 파일에 Store를 생성해준다.
const store = createStore(rootReducer);

ReactDOM.render(
  // Provider 컴포넌트로 App을 감싸주고 props로 store를 넘겨주면 리액트 앱에 store가 연동된다.
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3. reducer 함수 구현

rootReducer.js를 생성하여 initialState 및 rootReducer 함수를 구현한다. rootReducer 함수의 parameter로 현재의 state, action을 넘겨주며 함수 내부는 action.type에 따라 switch로 구분하고 각각의 action에 따라 적절하게 변화된 state를 리턴해준다.

const initialState = {
  counter: 0
}

function rootReducer (state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT' :
      return { counter: state.counter + 1}
    case 'DECREMENT' :
      return { counter: state.counter - 1}
    default :
      return state;
  }
}

export default rootReducer;

4. useSelector, useDispatch hook 사용

App.js에서 생성된 store를 직접 이용하기 위해 useSelector와 useDispatch Hook을 사용한다.

• useSelector : store의 state 값을 가져올 때
• useDispatch : action을 reducer에게 보낼 때

import "./App.css";
import { useSelector, useDispatch } from 'react-redux';

function App() {

  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <header className="App-header">
        <h1>Counter : {counter} </h1>
        <button onClick={() => {
          dispatch({type: "INCREMENT"})}}>INCREMENT</button>
        <button onClick={() => {
        dispatch({type: "DECREMENT"})}}>DECREMENT</button>
      </header>
    </div>
  );
}

export default App;

5. Counter App 완성

다음과 같이 Counter App이 생성되었고 제대로 동작한다.