🍊 2022-08-09

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• react의 클래스 기반 컴포넌트

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• constructor에서 this를 사용하려면 this를 사용하는 구문보다 먼저 super 메서드를 호출해야 한다. 이는 자바스크립트의 규칙이고 super는 곧 부모 클래스, 즉 상속받고 있는 클래스를 의미한다. 클래스 기반 컴포넌트는 React의 Component가 부모 클래스이다.

• super 메서드에 매개변수로 props를 전달하지 않아도 리액트는 props를 세팅해준다. 생성자 함수 내에서 this.props를 사용해야 한다면 super(props)로 props를 초기화해줘야 한다.

🌟 내일은 어떻게 해보고 싶으세요?

• react의 클래스 기반 컴포넌트 생명주기 알아보기

---

컴포넌트를 구축하는 또다른 방법 : 클래스 컴포넌트

기본적인 사용법

• 🔖 자바스크립트의 기본 기능인 클래스를 이용하여 컴포넌트를 생성한다.
• 🔖 최근의 기본값은 함수형 컴포넌트로 구성되지만 리액트 16.8이전에는 state와 side effect를 관리하기 위해서는 클래스 기반 컴포넌트를 사용해야 했다.
• 🔖 리액트 16.8에서 리액트 훅이라는 개념이 도입되어 클래스 기반에서만 관리할 수 있었던 state와 side effect를 함수형 컴포넌트에서 사용할 수 있게 된다. 훅이라는건 클래스 기반에서는 사용할 수 없다.
• 🔖 React.Component render()메서드에서 화면에 렌더링하고 싶은 JSX를 반환하면 된다. 함수형 컴포넌트에서의 반환문과 동일하다. props는 매개변수로 받지 않고 this.props로 호출한다. 이는 React의 Component를 상속받았기 때문에 가능하다.

// 같은 화면을 렌더링하는 두 가지 방법

//👇 클래스 기반 컴포넌트
class User extends React.Component {
  render() {
    return <div>User Name : {this.props.name}</div>;
  }
}
// 👇 함수형 컴포넌트
const User = (props) => {
  return <div>User Name : {props.name}</div>;
};

state와 이벤트

• 🔖 state를 정의할 때는 클래스의 생성자(constructor(){})에서 초기화한다.
  • 클래스가 constructor를 정의하고 다른 클래스를 상속 받으면 super()를 통해 상의 클래스의 생성자를 호출해야 한다.

• 🔖 상태를 변경하고자 할 때는 this.setState() 메서드를 사용한다. 새로운 상태를 매개변수로 전달하며 현재 존재하는 상태와 새로 전달된 객체(또는 갱신 함수가 반환하는 객체)를 병합한다.

  class User extends React.Component {
    constructor() {
      //this를 사용하기 전 super를 호출하지 않으면 오류가 발생한다.
      super();
      //클래스 컴포넌트의 상태는 객체 형태여야 한다.
      this.state = { showName: true, name: "yeeunkim" };
    }
  
    changeUserName() {
      this.setState((prev) => ({ showName: !prev.showName }));
    }
  
    render() {
      return (
        <>
          {this.state.showName && <div>User.name : {this.state.name} </div>}
          <button onClick={this.changeUserName.bind(this)}>
            toggle show username
          </button>
        </>
      );
    }
  }
  

---

🤔 constructor에서 super를 사용해야 하는 이유는?

• Class & State에서 Constructor와 Super를 쓰는 이유
• Dan Abramov - 왜 super(props) 를 명시해 줘야 하는가?
  • 이 블로그에서 말하듯 클래스 필드를 사용해서 state 변수를 선언하면 constructor 내부에서 상태 값을 초기화하지 않아도 된다.

🤔 super에 props를 반드시 넘겨줘야 하는가?

• super()와 super(props)의 차이