220404_TIL

오늘의 목표
클래스컴포넌트, this, 컴포넌트라이프사이클

1. 클래스컴포넌트

클래스란?
컴포넌트를 만드는 방법
즉 설명서
const date = new Date()

date.getFullYear()
date.getMonth()
date.getDate()

date를 객체(객체지향프로그래밍-OOP)라고 부름 혹은 instance
유지보수관리가 쉬워서 백에서 대부분 객체지향프로그래밍을 선호함

Date를 내장객체라고 함

class Date {
getFullYear(){
} //이런걸 함수이지만 function이 안붙는 함수라고 해서 메서드라고 함(그 메서드맞음)
getMonth(){
}
getDate(){
}
}
함수를 하나로 묶어두기 위해서 있음

class 컴포넌트 {
onChangeMyWriter(){
//작성자 인풋 변경
}
onChangeMyTitle(){
//제목 인풋 변경
}
onChangeMyButton(){
//등록하기 버튼 클릭
}
}

컴포넌트로 만들어주기 위한 state기능
export default class CounterPage{
}
이 클래스에
export default class CounterPage extends Componets {
}
해주면 컴포넌트 기능을 할 수 있음
컴포넌트 기능이 없으면 state, render 등등 할 수 없음

export default class CounterPage extends Componets {
state = {
counter: 0
} //클래스에서 state만들어주고(컴포넌트에서 제공)
render(){
return()
} //함수형컴포넌트의 return 컴포넌트에서 제공

}

2. this

this = 내 자신의 라는 의미를 함
선언된 범위 내에서 자기 자신을 의미함

this의 작동원리
this는 매번 똑같은게 아니라 누가 실행을 시켰느냐에 따라 달라짐
기본적으로 윈도우를 가르킴
이를 동적스코프라고 함
너무 ㅈ같기 때문에 자바나 씨언어로 바꾸려고 노력함
화살표 함수처럼
화살표 함수에서는 안바뀜(렉시컬this)

프로토타입언어 기반인 자바스크립트 특징임

3.컴포넌트 라이프 사이클

1. 그리기
   render
2. 그리고 난뒤
   componentDidMount
3. 그리고 난 뒤 변경됬을 때
   componentDidUpdate
4. 그리고 난 뒤 사라질 때
   componentWillUnmount

함수형에서는 이걸 useEffect로 퉁칠 수 있음

오늘의 부족한 점

this다시 공부하자