4. 리액트
TS/리액트/ 리덕스 (react-redux) 를 활용한 Todo 예제
패스트코드블로그
2020. 7. 14. 20:59
웹스톰에서 리액트 앱 with 타입스크립트 로 프로젝트를 생성합니다.
package.json 파일에 디펜던시 추가합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
{
"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"
}
}
|
cs |
tsconfig.json 파일 설정을 합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
{
"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"
]
}
|
cs |
대규모 개발 설정을 위한 데모버전이므로
리액트 컴포넌트: components & pages
리덕스 컨테이너: actions, apis, constants, helpers, reducers
를 전부 만듭니다.
Todo.tsx, index.ts 를 생성합니다.
기본 UI 를 코딩합니다.
액션 타입을 설정합니다.
액션을 작성합니다.