component, Component Life Cycle, state , setState

키워드
npm
npx
virtual DOM
jsx 
component
create-react-app
PropTypes

 

class
es6
state
extends
life cycle method
mounting
Updating
Unmounting
axios
async await
setState

---

component
HTML을 반환하는 함수
이러한 HTML과 Java script의 사이의 조합 : jsx
//javascript 안의 HTML

component 만들때 import 꼭 적기
//이곳에 있는 jsx가 component 사용함

application에 하나의 component만 렌더링 가능

//많은 component import해서 사용 가능

첫글자 대문자로

 

클래스 컴포넌트 
state 
render 사용 

함수 컴포넌트 
return 사용

---

- 명령 프롬프트

npx create-react-app 폴더이름 
//npx는 최신 create-react-app 파일 다운 
//작업 끝나면 삭제 

 

npm i npx -g
// npm의 작은 모듈 npx 설치

 

npm install -g yarn
//yarn 설치

 

npm install

// module 설치
 

code 폴더이름
//visual studio에서 리액트 폴더 열기

-visual studio
npm start
//서버 작동

---

Component Life Cycle

리액트가 component를 생성,삭제 하는 방법

 

- 생성될때

constructor => render => componentDidMount

 

- 업데이트

render => componentDidUpadte 

 

- 제거

componentWillUnmount 

 

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

---

state
class component의 데이터를 저장하는 공간
동적데이터와 작업할시 만들어짐
//변하는 데이터 , 존재하지 않는 데이터

 

setState

- setState 호출시 순서
1. state를 새로고침
// state 값 업데이트

2. render 호출
// 변경 된 값 출력

 

- state 값 가져올때 this.state 사용시 퍼포먼스 이슈 생김

function 사용하기

ex)

  add = () => {
    this.setState(current => (
      { num: current.num + 1 }
    ));
  }

---