리액트는 클래스형 컴포넌트 또는 함수형 컴포넌트 두가지로 나누어서 컴포넌트를 작성할 수 있다. 이전까진 클래스형 컴포넌트의 상태값, 생명주기 기능을 할 수 없었지만 2019년 리액트 16.8 버전부터 훅이 추가됨으로써 함수형 컴포넌트에도 클래스형 컴포넌트의 기능을 할 수 있게 되었다.
현재 리액트 공식사이트에서 함수형 컴포넌트와 훅으로 작업하는 것을 간결하고 사용하기 편리하여 권장하고 있어 함수형 컴포넌트로 많이 쓰고있는 추세다.
그렇지만 클래스형 컴포넌트가 오래되었다보니 아직 클래스형 컴포넌트를 사용하는 곳이 있어 공부해야 할 필요성이 있어 알아보았다.
클래스형 컴포넌트는 자바스크립트의 함수와 비슷한 성질이 있다. 자바스크립트의 함수 선언 방식처럼 new "함수"() 해주면 실행된다. 자바스크립트의 new Date() 메소드처럼 그안에 객체의 형태로 데이터를 담고 있다.
클래스에서 공통 기능을 extends를 통해 공통 기능을 상속 해줄 수 있다. 이때, 기능 상속시 같은 함수를 선언할 때 객체에서처럼 기존 기능에서 새로운 기능으로 덮어진다. 이를 "오버라이딩" 이라고도 한다.
컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들이다.
import { Component } from "react";
import Router from "next/router";
export default class ClassCounterPage extends Component {
state = {
count: 0,
};
componentDidMount(): void {
console.log("그려지고 나서 실행!!"); ==> 화면 출력 후 실행!!
}
componentDidUpdate(): void {
console.log("변경되고 나서 실행!!"); ==> 값이 변경될 때!!
}
componentWillUnmount(): void {
console.log("사라지기 전에 실행!!"); ==> 더는 사용하지 않을 때!!
// 예) 채팅방 나가기 API
}
onClickCountUp = (): void => {
console.log(this.state.count);
this.setState({
count: 1,
});
};
onClickMove = (): void => {
void Router.push("/");
};
render(): JSX.Element { ==> 화면 출력!!
return (
<>
<div>{this.state.count}</div>
<button onClick={this.onClickCountUp}>카운트 올리기</button>
<button onClick={this.onClickMove}>나가기
</button>
</>
);
}
}
- useEffect란 함수형 컴포넌트가 클래스형 컴포넌트처럼 생명주기 기능을 할 수 있게 만드는 훅(Hook)의 종류이다.
- [ ]이 있다면, 처음에 한번만 실행되고 그 다음부터는 배열의 값이 바뀔때마다 실행한다. 이를 "의존성 배열"이라 한다.
- 가장 상단에 있어도 화면이 출력되고나서 실행되므로 setState가 들어가 있는 경우 처음 차례로 한줄 씩 읽고 다시 한번 useEffect를 읽어 추가 렌더링이 된다. (여러번 반복해서 읽기때문에 가급적이면 사용하지 않는 것이 좋다.)
- 마지막 예시처럼 setState값이 useEffect 안에 있고 배열에 state값이 있으면 무한 루프가 생길 수 있으니 사용할때 유의하자.