React 튜토리얼에 있는 class형 컴포넌트..

 

리액트 함수형만 하면서 자연스럽게 class에 대한 대부분의 정보를 잊게 되었다.

class는 Object 찍어내는 용도 말고는 사용법을 잘 모름..

Class는 Object 찍어내는 기계(코딩애플)

 

여튼 공식문서 튜토리얼을 보면 본능적?으로 무슨 뜻인지 알겠는데

한줄한줄 설명할 수 없어서 this, extends등의 용어를 알아보았다.

(객체지향언어로서의 원론적인 의미까지 찾아보지는 않았음)

 

extends

extends는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용된다.(MDN)

// ParentClass로부터 ChildClass를 만든다.
class ChildClass extends ParentClass { ... }

// React.Component로부터 Board 를 만든다.
class Board extends React.Component { ... }

this

this : 자기참조변수

말 그대로 자신을 참조하는 변수

 

class Board extends React.Component {
// extends는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용됩니다.
  renderSquare(i) {
    return <Square value={i}/>;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
        //자기참조변수 this는 Board를 참조한다.
        //Board의 renderSquare(0)을 실행시킴
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

 

constructor

constructor를 사용하면 다른 모든 메서드 호출보다 앞선 시점인, 인스턴스 객체를 초기화할 때 수행할 초기화 코드를 정의할 수 있다. 

prototype과 constructor가 밀접한 관계가 있었던걸로 기억하는데, 면접공부 한 이후로 본적이 없으니 기억이 나질 않는다..

 

다만, 알아본 바에 따르면

메서드 호출보다 앞선 시점인, 인스턴스 객체를 초기화 할 때 수행할 초기화 코드를 정의하기 때문에 해당 Component가 마운트 되기 전 호출된다.

 

super

자식 클래스가 생성될 때, 부모 클래스(React.Component)의 생성자를 참조

 

React.Component를 상속한 컴포넌트의 constructor를 구현할 땐 super(props)를 선언하라고 한다.

해당 컴포넌트가 마운트 되기 전 constructor내에서 super(props)가 호출되어 props를 정의 및 초기화 한다.

this.props 사용시 생성자 내에서 정의되지 않으면 버그 발생 가능성이 생기기 때문

 

=> super(props)를 호출하는 이유는 constructor내부에서 this.props를 사용하기 위함

 

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => console.log('click')}>
        {this.props.value}
      </button>
    );
  }
}