TS/리액트/ 리덕스 (react-redux) 를 활용한 Todo 예제

웹스톰에서 리액트 앱 with 타입스크립트 로 프로젝트를 생성합니다.

 

package.json 파일에 디펜던시 추가합니다.

 

{
  "name": "chatbot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "connected-react-router": "^6.8.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-simple-chatbot": "^0.6.1",
    "redux": "^4.0.5",
    "styled-components": "^5.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-node": "^8.10.2",
    "typescript": "^3.7.5"
  }
}

 

tsconfig.json 파일 설정을 합니다.

 

{
  "compilerOptions": {
    "target": "es6",
    "noImplicitAny": false,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

 

대규모 개발 설정을 위한 데모버전이므로 

리액트 컴포넌트: components & pages 

리덕스 컨테이너: actions, apis, constants, helpers, reducers 

를 전부 만듭니다. 

 

Todo.tsx, index.ts 를 생성합니다.

 

기본 UI 를 코딩합니다.

 

액션 타입을 설정합니다.

 

액션을 작성합니다.