클래스 컴포넌트
쉽게 말해 '물건을 만들기 위한 설명서'
생성한 class는 객체이며 따라서 메소드(함수)를 사용할 수 있고 JS에 내장된 객체는 내장 객체라고 한다.
이런 객체들을 사용한 프로그래밍을 객체지향프로그래밍(OOP)라고 한다.
비슷한 객체를 만드는 경우 공통으로 가지는 기능을 하나의 객체로 만들고 만들어진 공통기능 객체를 상속받아서 공통기능을 포함한 세부 객체를 생성할 수 있다.
단, export default class로 생성된 클래스형 컴포넌트는 기본적으로 컴포넌트의 기능이 없으므로 컴포넌트 기능을 상속받아야 한다.
import {Component} from 'react'react에서 제공하는 컴포넌트를 임포트해 해당 기능들을 상속받아 올 수 있고
export default class ClassCounterPage extends Component{
}이런식으로 extends를 통해 설정할 수 있다.
this (dynamic this)
class component에서 this는 자기 자신을 의미하며 컴포넌트에서 선언한 함수를 사용하기 위해서는 this.* 이런식으로 사용해야만 한다.
다만 this는 어디에서 사용하는지에 따라 불러오는 값이 달라지므로 this가 실행된 위치에서 상속받는 데이터 혹은 함수가 본인이 원하는 데이터가 맞는지 확인이 필요하다.
따라서 이런 동적 상속을 방지하기 위해서 이벤트 핸들러 등 상속값이 바뀔수 있는 부분에 바인드를 해줘야 원하는 값을 받아올 수 있으며 혹은 사용하고자 하는 함수를 선언할 때 일반 함수가 아닌 화살표 함수로 선언하면 this가 고정이 된다.
이렇게 대상이 고정된 this를 렉시컬 this라고 한다.
즉, dynamic this를 바인딩 혹은 화살표 함수를 통해 렉시컬 타입으로 바꿔 주어야 한다.
컴포넌트 생명주기
class component에서 랜더링 단계에 따라 함께 실행될 함수를 설정할 수 있다.
- render
- componentDidMount
- componentDidUpdate
- componentWillUnmount
위 네 종류의 명령어를 통해 처음 랜더시, 그리고 난 뒤, 그린 뒤 변경됐을 때, 그리고 난 뒤 사라질 때 등 랜더링 단계에서 실행될 것들을 지정할 수 있다.
** 위의 네 종류 외에도 종류는 많지만 개발자들과 react 측에서도 class component 에서 functional component로 넘어가는 추세이므로 class component의 기능들이 삭제되는 중이다.
functional-component에서는 useEffect로 위의 네 종류를 전부 지정할 수 있으며
useEffect 내부에서 설정을 어떻게 주느냐에 따라 랜더링 단계가 결정된다.
