Class Component
이제는 잘 사용하지 않지만 기존에 만들어진 클래스형 컴포넌트의 유지보수를 할 수도 있고, 함수형 컴포넌트 + Hooks로 못하는 작업도 있다. 그리고 어쩔 수 없이 클래스형 컴포넌트를 사용할 수도 있기 때문에 알아둘 필요가 있다.
클래스에서의 함수와 변수 사용법
클래스에서 함수와 변수를 사용할 때는 function, let, count 안써도 된다.
class Monster {
// class의 변수 작성
power = 50;
// class의 함수(메소드) 작성
// class에서 만들어진 함수를 메소드라 부른다.
attack(): void {
console.log("공격합니다!!");
}
}클래스에서의 상속
클래스에서는 공통 기능을 extends를 통해 상속해 줄 수 있다.
class Monster {
power = 50;
attack(): void {
console.log("공격합니다!!");
}
}
// 클래스 상속 : 기존 클래스에 기능을 추가해서 만든 클래스
class SuperMonster extends Monster {
run(): void {
console.log("도망가자!!");
}
// 오버라이딩: Monster의 메소드를 다시 정의해서 덮어씌운다.
attack(): void {
console.log("슈퍼 몬스터 필살기!!");
}
}
const monster = new Monster();
console.log(monster.power); // 50
monster.attack(); // 공격합니다!!
const supermonster = new SuperMonster();
console.log(supermonster.power); // 50
supermonster.attack(); // 슈퍼 몬스터 필살기!!class component 만들어보기 실습
//count 컴포넌트를 만들어보겠습니다.
import { Component } from "react";
export default class ClassCounterPage extends Component {
// 클래스 변수의 선언 방식
state = {
count: 0,
};
// 클래스에서의 함수 사용방식
onClickCountUp = (): void => {
console.log(this.state.count);
this.setState({
count: 1,
});
};
// 화면 그리는 부분
render(): JSX.Element {
return (
<>
{/* this는 클래스 자기자신을 뜻한다. */}
<div>{this.state.count}</div>
```jsx
//count 컴포넌트를 만들어보겠습니다.
import {component} from 'react'
export default class ClassCounterPage extends Component {
// class 변수의 선언 방식
state = {
count : 0,
}
// class에서의 함수 사용방식
onClickCounter = () =>{
console.log(this.state.conut)
this.setState(((prev))=>({
count : this.state.count(=prev.count) +1
}))
}
// 화면 그리는 부분
render(){
return(
<div>
{/* this는 class 자기자신을 뜻합니다. */}
<div>현재 카운트 : {this.state.count}</div>
{/* 직접 바인딩할 때는 onClick={this.onClickCouter.bind(this)} 라고 적어주어야한다. */}
<button onClick={this.onClickCouter}>카운트 올리기</button>
</div>
)
}
}this 바인딩(.bind(this))
this는 실행하는 주체에 따라 다르게 나오며, 이를 동적 this라고 한다.
따라서 onClickCounter를 클릿기에 this가 onClickCounter로 바뀌게 된다.
변화하는 this를 class로 고정하기 위해서는 this를 바인딩해주거나 화살표 함수를 써야한다.
이런 바인딩 과정을 거쳐 고정된 this를 렉시컬 this라고 한다.
Class 컴포넌트의 생명주기(life Cycle)
클래스 컴포넌트의 생명주기는 간단히 요약하자면
1. 그리기 → render
2. 그리고 난 뒤 → componentDidMount
3. 그리고 난 뒤 변경 되었을 때 → componentDidUpdate
4. 그리고 난 뒤 사라질 때→ componentWillUnmount
// class 컴포넌트의 생명주기
import {Component} from 'react'
import Router from 'react'
export default class ClassCounterPage extends Component{
state = {
count : 0,
}
//라이프사이클 메서드
componentDidMout(){
console.log("마운트 됨")
//input태그 선택해서 포커스 깜빡거리게 하기
}
componentDidUpdate(){
console.log("수정하고 다시 그림!!")
}
componentWillUnmount(){
console.log("여기서 나갈래요")
//나가기 전에 마지막으로 할 것들
}
// 카운트 올리기 함수
onClickCouter = ()=>{
console.log(this.state.conut)
this.setState(((prev))=>({
count : this.state.count(=prev.count) +1
}))
}
// 현재 페이지 나가기 함수 _ componentWillUnmount를 보기위한
onClickMove = () => {
router.push('/')
}
// 화면 그리는 부분
render(){
return(
<div>
{/* this는 class 자기자신을 뜻함 */}
<div>현재 카운트 : {this.state.count}</div>
(/* 직접 바인딩 할 때는 onClick={this.onClickCouter.bind(this)} 라고 적어주셔야 한다. */}
<button onClick={this.onClickCouter}>카운트 올리기</button>
<button onClick={this.onClickMove}>나가기</button>
</div>
)
}
}함수형 컴포넌트의 생명주기
함수형 컴포넌트에서의 생명주기 메소드는 useEffect이다.
// 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 된다.(1번만 실행)
useEffect(()=>{
console.log("마운트 됨!!")
},[])
// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행된다.
useEffect(()=>{
console.log("수정하고 다시 그려짐!!")
})
// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
console.log("수정하고 다시 그려짐!!")
},[someState])
useEffect(()=>{
console.log("수정하고 다시 그려짐!!")
//이부분이 끝나고 진행할 것들
return(()=>{
console.log("여기서 나갈래요!!")
})
})🌱 주의 사항
1. useEffect에 의존성 배열을 적어주지 않고 return 또한 해주지 않으면, 무한렌더 지옥에 빠지시게 된다.
2. useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양
