[TIL 04.04] Class-Component / this / Component-Lifecycle

Class-Componenet

클래스형 컴포넌트(Class-Componenet)는 react에서 컴포넌트를 선언하는 방식이다.
클래스형 컴포넌트는 현재 자주 사용하지 않는 방식이지만 아직 사용하는 곳도 많기 때문에 알아두면 좋다.

클래스형 컴포넌트는 물건을 만드는 설명서라고 생각하면 편하다.
위에 그림을 보면 클래스를 이해하기 더욱 수월하다.
클래스형 컴포넌트는 보통 백엔드에서 많이 사용한다.
벡엔드에서 클래스형 컴포넌트를 사용하면 API를 만들때 용이하다.
위에 그림을 보자.
먼저 클래스안에 앞에 function이 붙어있지 않은 것들이 보이는데 우리는 이러한 것들을 메소드(method)라고 부른다.
그리고 이러 메소드들 앞에 ' .(dot) '을 붙여 사용하는것들을 객체(객체지향프로그래밍)이라고 한다.
다음은 클래스형 컴포넌트에 사용방법이다.

import { Component } from "react";

export default class CounterPage extends Component {
  // state라는 이름이 있는데 마음대로 이름을 바꾸지 못한다. 
  // class라는 것과 상관없이 컴포넌트로 확장했기에 사용할수 있는 것이다.
  state = {
    count: 0, // 이러면 카운트라는 스테이트가 만들어진다.
  };

  // 화살표 함수를 사용하면 동적스코프가 되지 않고 this가 
  // 윈도우의 this가 되므로 여기서는 우리가 원하는 컴포넌트의 this가 된다.
  onClickCounter = () => {
    console.log(this.state.count);
    // setState 또한 컴포넌트에 내장되어 있는 기능이다 
    // 따로 선언해주지 않아도 사용가능하고 컴포넌트로 확장해주지 않으면 사용불가이다.
    
    // this의 작동원리는 누가 이것을 작동시켰는지가 중요함
    this.setState((prev: any) => ({
      count: prev.count + 1,
    }));
  };

     // 이런식으로 직접 만들어서 사용할 수 있다. 직접 만들었기에 이름을 마음대로 해도 된다.
  aaa() {}

     // 이것 또한 리액트에서 제공해주는 컴포넌트의 기능이다. 
     // 원래 클래스에는 이런 기능이 없다.
  render() {
      // 화면에 그려지는 부분
    return (
      <div>
        {/* 스테이트를 사용하게 되면 this가 나오게 되는데 이때 
        이 this는 클래스 컴포넌트 그 자체라고 생각하면 된다. 
        단 동적스코프를 가진 this인 경우에는 실행시킨 위치에 따라 달라진다.*/}
        <div>현재카운트{this.state.count}</div>
        {/* bind를 사용하면 현재 함수와 바인딩 되기 때문에, 
        	즉 사용하는 함수의 this가 되기때문에 
        	화살표 함수가 아니더라도 this를 지정할수 있다.
            이것 또한 동적인 this인 경우에 사용한다.*/}
        <button onClick={this.onClickCounter.bind(this)}>
          !!!!!!!!!!!카운트 올리기!!!!!!!!!!!!
        </button>
      </div>
    );
  }
}

// 클래스라는게 원래 컴포넌트가 아니다. 리액트에서 제공해주는 확장 클래스를 사용한다.
// 컴포넌트로 사용하고 싶으면 extends라는게 있는데 클래스를 확장시켜준다. 
// Component로 확장해주는거다.
// 이렇게 사용하면 컴포넌트 기능을 가진 클래스가 된다.
// 클래스는 객체지향프로그램을 만들때 묶기위해 만드는거라고 생각하면 된다.

this

위에 클래스형 컴포넌트는 변수나 함수를 사용할때 this가 붙는다.
이 this가 무엇인지 알아보자.
this는 함수의 키워드이다.
변수, 객체, 배열 등을 참조할수 있다.
this의 동작원리는 실행시킨 위치에 따라 참조하는 것이 달라진다.
사용하는 스코프에 따라 참조하는 것이 달라진다.
위 코드를 보면 가장 위에서 선언한 this는 전역인 window를 참조한다.
그 아래 qqq를 확인하면 aaa를 참조하는 것을 확인할수 있다.
하지만 화살표 함수에서는 동적스코프로 작동하지 않고 전역으로 this가 참조하게 된다.
이를 렉시컬스코프라 하고 언어적인 this가 된다.

Component-Lifecycle(생명 주기)

리액트 컴포넌트는 생명 주기가 있다.
컴포넌트가 실행되거나 업데이트 되거나 제거될 때 특정한 이베트가 발생한다.
먼저 클래스형 컴포넌트 사용방법이다.
위에 사진과 같이 클래스형 컴포넌트에는 리엑트에서 제공해주는 이벤트 함수가 있다.

• render : 위에 코드에서도 보았듯이 화면에 그려주는 부분을 담당한다.
• componentDidMount : 렌더되고 나서 실행 된다. 단 처음 페이지를 실행했을때 한번만 실행이 된다.
• componentDidUpdate : 처음 렌더 이후 다시 렌더 될때마다 실행이 된다.
• componentWillUnmount : 컴포넌트가 사라지고 나서 실행이 된다.

  // 렌더되고 나서 딱 한번만 실행
  // 화면에 그림이 다 그려지고나서 포커스를 깜빡깜빡하게 해줄때 사용 가능
  componentDidMount() {
    console.log("마운트!!!!!!!!!!!");
    this.inputRef.current?.focus();
  }

  // 렌더될때 마다 실행
  // 처음은 실행을 안한다.
  componentDidUpdate() {
    console.log("수정되고 다시그려짐!!!!");
  }

  // 컴포넌트가 사라지고 나서 실행이 된다.
  // 여기에 api요청을 해주면 나가기 버튼이 아니고 다른방법으로 나가도 api요청이 된다.
  componentWillUnmount() {
    console.log("컴포넌트 사라짐!!!!!!!");
  }

다음은 함수형 컴포넌트의 생명 주기 사용법 이다.
함수형 컴포넌트에서는 useEffect를 사용한다.

  // 1. 클래스형 컴포넌트의 componentDidMount와 같은 동작을 한다.
  useEffect(() => {
    console.log("마운트됨!!");
    inputRef.current?.focus();
  }, []);
  
  // 2. 클래스형 컴포넌트의 componentDidUpdate와 같은 동작을 하지만 처음부터 실행이 된다.
    useEffect(() => {
    console.log("수정되고 다시 그려짐");
  });
  
  // 3. 클래스형 컴포넌트의 componentWillUnmount와 같은 동작을 한다.
    useEffect(() => {
    return () => {
      console.log("컴포넌트 사라짐!!!!!!!");
    };
  }, []);
  
  // 4. componentDidMount와 componentWillUnmount를 한번에 작성하여 사용할수 있다.
   useEffect(() => {
    console.log("마운트됨!!");
    inputRef.current?.focus();

    return () => {
      console.log("컴포넌트 사라짐!!!!!!!");
    };
  }, []);