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

Class-Componenet

クラスエレメントは、反応中にエレメントを宣言する方法である.
クラス部品は現在あまり使われていない方式ですが、いろいろな使い方があるので、知っておくといいでしょう.
部品を制作物の説明書にするのは便利です.
で画像を見るとクラス図がわかりやすくなります.
クラス構成部品は、通常、バックエンドで使用されます.
beck側でクラス要素を使用すると、APIの作成が容易になります.
の写真を見てください.
まず,クラスには前に関数のないものが見え,これらをメソッド(method)と呼ぶ.
「そしてこの方法の前で」.「(点)」はオブジェクト(オブジェクト向けプログラミング)と呼ばれます.
次に、クラス構成部品の方法を示します.

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はグローバルwindowを参照しています.
下のqqqを見て、aaaを参照することができます.
ですが、矢印関数ではダイナミックスキャンプログラムとして動作せず、グローバルリファレンスとして動作します.
これがLexicalScopraと言語上のthisです.

コンポーネントライフサイクル

反応素子にはライフサイクルがある.
構成部品が実行、更新、または削除されると、特定の例外が発生します.
まずクラスエレメントの使い方です.
において、クラス要素は、写真に示すようにreactによって提供されるイベント関数を有する.

render:上記のコードに示すように、画面に描画する部分を担当します.

コンポーネントDidMount:レンダリング後に実行します.ページを最初に実行したときにのみ実行されます.

コンポーネントDidUpdate:1回目のレンダリング後に再レンダリングするたびに実行されます.

コンポーネントWillUnmount:構成部品が消失した後に動作します.

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

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

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

次に、関数型構成部品のライフサイクルの使用方法を示します.
関数型構成部品はuserEffectを使用します.

  // 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("컴포넌트 사라짐!!!!!!!");
    };
  }, []);