개요

나는 서버 측 엔지니어이지만 한 번에 프론트도하고 있습니다.
업무로 React+Redux를 사용하고 있으므로, 구성을 참고로 하면서 심플한 병아리를 만들었습니다.

이 샘플은 텍스트 양식에 입력한 내용을 console.log 로 출력하는 간단한 내용입니다.
React-Router를 사용하고 있는 2페이지 구성입니다.

다음과 같이 작동합니다.

1. git clone
2. npm install (또는 yarn install)
3. npm run start (또는 yarn run start )
4. webpack 서버가 시작되므로 콘솔 출력 URL에 액세스
예: http://localhost:8083/

디렉토리 구조

디렉토리 구조

├── public
│   └── index.html
├── src
│   ├── Handler.jsx
│   ├── actions
│   │   └── index.js
│   ├── compornents
│   │   ├── About.jsx
│   │   └── App.jsx
│   ├── reducers
│   │   └── index.js
│   └── store
│       └── configurte-store.js
├── stylesheets
│   └── index.scss
├── .eslintrc.js
├── README.md
├── package-lock.json
├── package.json

각 파일의 설명

Action, Reducer, Compornents의 각 계층마다 디렉토리를 잘라내고 있다.

src/actions/*.js
src/compornents/*.jsx
src/reducers/*.js

src/Handler.jsx
가장 먼저 읽는 JS
React-Router로 Routing,
다른 초기 처리를 읽는 중입니다.

src/store/configurte-store.js
Store의 설정을 실시하고 있다.
Middleware 로드, Reducer와의 연결, Redux-Devtool 설정 등.
Middleware는 redux-thunk만 사용하고 있다.

사용 패키지

사용중인 패키지는 다음과 같습니다.
es2015 등 약간 오래된 패키지를 사용하고 있기 때문에, 적당히 최신의 것을 사용하면 좋을 것입니다.

package.json

{
  "name": "react-redux-sample",
  "version": "1.0.0",
  "main": "index.js",
  "author": "ryokwkm <[email protected]>",
  "license": "MIT",
  "description": "react redux simple code",
  "dependencies": {
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "import-glob-loader": "1.1.0",
    "node-sass": "4.5.3",
    "prop-types": "15.5.10",
    "query-string": "5.0.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-redux": "5.0.6",
    "react-router-dom": "4.1.2",
    "redux": "3.7.2",
    "redux-devtools": "3.4.0",
    "redux-devtools-extension": "2.13.2",
    "redux-thunk": "2.2.0",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "webpack": "3.3.0",
    "webpack-dev-server": "2.11.3"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0"
  },
  "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server"
  }
}

redux를 사용한 감상

결론적으로 대규모 앱이 아닌 경우 React만으로 충분하다고 느꼈습니다.
React는 비교적 간단하지만 Redux는 난이도가 높기 때문에 주된 이유입니다.

학습도 필요한 데다, 코드량, 복잡성이 증가합니다.
개발 비용이 증가할 것입니다.

소스를 깨끗하게 분할할 수 있으므로 관리의 용이성이 높아집니다.
하지만 거기까지 대규모가 아닌 앱이라면 React만으로 충분한 인상입니다.

아래의 기사에서는 Redux의 개발자의 코멘트를 소개하고 있습니다만, 무리하게 도입할 필요는 없다는 취지가 쓰여져 있습니다.
htps : /// ch 라쵸. bp 신 c. jp/벌 8833/2018_03_13/53183