기초 노드 리액트 - 섹션 0. Node JS (#25~34)

JeongHun·2022년 8월 2일

nodejs 노드리액트 리액트스터디

노드, 리액트 시리즈 스터디

목록 보기

4/10

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
해당 학습 코드

25. Antd CSS Framework

CSS Framework를 쓰는 이유?
→ 기능을 만드는데 더욱 집중하기 위해서

CSS Framework 종류 for React JS

Material UI
React Bootstrap
Semantic UI
Ant Design
Materialize…

참고 : ant.design

실행 : boiler-plate/client> npm install antd --save

26. Redux 기초

Redux ? : Redux is a predictable state container for JavaScript apps (상태 관리 라이브러리)

state ? → Props vs State

Props

component 간에 소통하기 위해서는 props 사용
immutable (부모 → 자식 이동 / 그리고 준 value는 자식 안에서 바꿀 수 없고 다시 부모 → 자식한테 줘야함)

state

componet안에서 데이터 교환할때 state 사용
State : mutable 충분히 변경 가능(re-render)

Redux는 state를 관리하는 것

Actions → a plain object describing what happened

Reducer → a function describing how the application’s state changes

(이전 state과 action object를 받은 후에 next state를 return 한다)

Store → A store holds the whole state tree of your application. it’s just an object with a few methods on it

27. Redux UP!!!

실행 : npm install redux react-redux redux-promise redux-thunk --save

redux-promise, redux-thunk → middleware (redux를 편리한 사용을 도와줌)

redux의 store - state 변경을 위해서는 dispatch를 이용해서 action으로 변경해가야함 → action은 객체 형식필요 , 하지만 promise, function도 보냄

redux-thunk는 dispatch한테 function을 받는 방법을 알려주고

redux-promise는 dispatch한테 promise을 받는 방법을 알려준다

tools을 사용해서 redux 편하게 사용 → download(아래 그림 참고)

28. React Hooks

React Component

class component
1. provide more feature
2. more code
3. more complex code
4. slower performance
functional component
1. provide less features
2. less code
3. simpler code
4. faster performance

but, which features can’t we use in functional component?

so most of the time, we needed to use class component →

This changed with the React 16.8 Hooks update!

Now we can do everything with simpler syntax and faster performance

29. 로그인 페이지(1)

30. 로그인 페이지(2)

ERROR 1(terminal) : Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported

npm run dev 했더니 위와 같은 ERROR가 나왔다.

This problem occurred after react-script was upgraded to 5.0.0 solution →

replace with

client/src/index.js
import 'antd/dist/antd.min.css';

ERROR 2(terminal) : ERROR in ./node_modules/body-parser/lib/read.js 24:11-26
[1] Module not found: Error: Can't resolve 'zlib' in 'C:\Users\kimjeonghun\Documents\boiler-plate\client\node_modules\body-parser\lib' [1][1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default…

코드 작성 후 npm run dev 했는데 error 28개 나왔다.
아래와 같이 처리해주면 error가 해결된다.

// import { response } from "express"; 주석처리

ERROR 3(console) : TypeError: Cannot read properties of undefined (reading 'push')

로그인이 되고 페이지가 넘어가지 않는다면 f12 눌러서 console 확인해보면 위와 같은 오류가 확인된다. 아래와 같이 navigate 사용해서 처리해주면 error가 해결된다.

import {useNavigate} from 'react-router-dom'
..
let navigate = useNavigate()
..
dispatch(loginUser(body))
         .then(response => {
                if(response.payload.loginSuccess) {
                    navigate('/')
                } else {
                    alert('Error')
                }
          })