React를 경험해보자. 4탄

 

✏️React를 경험해보자 4탄

 

3편에서는 Proxy 설정을 통해 Cors 문제를 해결했다.

4편에서는 node.js (server)와 react (client) 서버를 동시에 실행할 수 있는 Concurrently, 

상태관리 라이브러리인 Redux를 적용해볼까 한다. 

 

 

- 서버와 클라이언트를 동시에 실행할 수 있는 Concurrently

 

Backend + Frontend를 같이 사용하는 프로젝트를 하다보면, 둘 다 서버를 켜줘야 한다. 

매번 귀찮게 두번 명령어를 입력할 필요 없이, 한번의 명령어로 두개의 서버를 켜주는 착한 라이브러리이다.

 

www.npmjs.com/package/concurrently

concurrently

 

npm i concurrently

 

npm으로 concurrently를 설치 후, root에 있는 package.json 폴더에서 아래의 스크립트를 추가해준다.

 

  "scripts": {
    "dev": "concurrently \"npm run backend\" \"npm run start --prefix front \""
  },

 

꼭 root에 있지 않아도 상관 없으며, cd ../ && npm run start 등으로 폴더 접근 후 명령어 지정을 할 수 있다. 

정말 간단하게도, 위 스크립트 한 줄 추가로 두 개의 서버를 동시에 킬 수 있다. 

 

끝이다. (정말...정말로)

 

 

 

- 상태 관리 라이브러리, Redux 

 

Vue에 Vuex가 있다면, React는 Redux가 있다. 

우선 설치할 라이브러리가 좀 있다. 

 

npm install redux react-redux redux-promise redux-thunk --save

 

redux

react-redux

redux-promise

redux-thunk 

 

총 4개를 설치해야한다. 

 

각각 어떤 역할을 하는지 코드를 보면서 하나씩 알아보자.

 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";

import "antd/dist/antd.css";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promise";
import reduxThunk from "redux-thunk";
import reducer from "./_reducers";

const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  reduxThunk
)(createStore);

ReactDOM.render(
  <React.StrictMode>
    <Provider
      store={createStoreWithMiddleware(
        reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
          window.__REDUX_DEVTOOLS_EXTENSION__()
      )}
    >
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

 

우선 redux는, 위에 설명했던 것과 같이 상태관리 라이브러리다. 

redux에서 applyMiddleware, createStore를 가져와서 사용한 코드다. 

 

const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  reduxThunk
)(createStore);

      store={createStoreWithMiddleware(
        reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
          window.__REDUX_DEVTOOLS_EXTENSION__()
      )}

 

우선 applyMiddleware를 보면, 조금 특이하게 되어 있다. 

이 문법을 이해하기 위해서는 applyMiddleware가 어떻게 되어 있는 코드인지 먼저 봐야한다.

 

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)   // why not just use `dispatch: dispatch`
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

 

이런 구조로 되어 있는데, 

먼저 createScoreWithMiddleware 변수에 applyMiddleware(middleware1, middleware2)(createStore)를 넣으면

커링으로 인해 applyMiddleware가 2개의 인자를 가지고 있는 상태다. 

 

그리고 store={createScoreWithMiddleware(reducer, preloadedState)}까지 인자를 모두 전달하고, 

전달한 미들웨어가 적용된 store와 dispatch를 반환시킨다. 

 

이 코드에서 middleware1, middleware2는 아까 설치했던 redux-promise, redux-thunk 이 두가지이다. 

이 두개의 라이브러리는 추후 사용할 때 다시 이야기하겠다. (아직 사용하지 않아서..)

 

createStoreWithMiddleware(
        reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
          window.__REDUX_DEVTOOLS_EXTENSION__()
      )

 

첫 번째 인자로 reducer(combineReducers)를 전달해주고, (자세한 내용은 뒷 포스팅에서)

 

REDUX_DEVTOOLS는 크롬 redux-devtools를 사용하기 위함이다.

 

그리고 Provider 같은 경우, 하위 컴포넌트들이 Store로 접근할 수 있도록 해주는 것이라 생각하면 된다.

 

4탄은 Redux와 Concurrently를 경험해보았다.

 

끝.

 

어떤 글에서, 초보자는 React보다 Vue가 사용하기 쉽다고 했었는데, 처음엔 React를 사용해보지 않았기 때문에 

어떤 뜻인지 이해하지 못했다. 요즘 React를 사용하면서 참 많이 느낀다.

Vue가 초보자들에게 참 좋은 프레임워크였다는 걸...