- Class Component
class는 객체이자 물건을 만드는 설명서이다
class Pokemon {
power = 75;
attack() {
console.log("몸통박치기!");
}
}위와 같이 사용하며 const, function() 같은걸 붙이지 않고 this가 생략되어져 있으며 자기자신을 의미한다
Pokemon : 객체 또는 인스턴스라고 부른다
Pokemon.power, Pokemon.attack() : 메소드라고 부른다
클래스에서 onClick같은 이벤트를 사용시 bind를 사용하거나 화살표 함수를 사용해야 한다
onClick={this.onClickCouter.bind(this)}- 컴포넌트 생명주기
컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드 이다
componentDidMount : 페이지가 그려지고 나면 실행
componentDidUpdate : 값이 변경이 되면 실행
componentWillUnmount : 페이지 이동할때 실행
- useEffect
함수형 컴포넌트 생명주기
useEffect(()=>{}, [])[]: 의존성 배열, []이 들어가면 페이지 렌더시 함수가 실행이 되고 해당 배열안에 있는 값이 변경이 되면 함수를 실행
의존성 배열 없을시 뭔가 수정이 될때마다 함수 실행
useEffect(()=>{
return(()=>{})
})componentWillUnmount와 똑같이 작동하나 페이지 렌더시에도 한번 실행된다
