패스트캠퍼스 챌린지 45일차 (클래스 컴포넌트의 구조와 한계)

22.3.9 (수) +45days

클래스 컴포넌트의 구조

React Component 인스턴스를 생성하는 클래스

import React from "react";
import "./styles.css";

class Greeting extends React.Component {
  showNmae = () => {
    alert(this.props.name);
  };

  handleShowName = () => {
    setTimeout(() => {
      this.showNmae();
    }, 3000);
  };

  render() {
    console.log(this);

    return (
      <>
        <h1>Hello, {this.props.name}</h1>
        <button onClick={this.handleShowName}>show name</button>
      </>
    );
  }
}

클래스 컴포넌트의 특징

인스턴스 재환용

• props, state 재할당 시 값 비교 후 render 메서드 실행
• 비교 전략 제공 (shouldComponentRender, PureComponent)

한계

인스터스 재활용에 의한 부작용, 길어지는 코드

...

class Greeting extends React.Component {

  showNmae = () => { ***// ---> 3초 후의 this.props.name은 클릭 시점의 값과 다를 수 있다.***
    alert(this.props.name);
  };

  ...

	render() {
    console.log(this);

    return (
      <>
        <h1>Hello, {this.props.name}</h1>
				{/* 실행 시점의 props.name 값을 바인딩한 채로 매 렌더링마다 생성되는 showName 함수 */}
        <button onClick={this.handleShowName}>show name</button>
      </>
    );
  }
}

What is this?

이벤트 핸들러에서 React.Component 기능을 사용할 떄 생기는 문제

요약

클래스 컴포넌트의 한계. Why we’ve stopped using Class Component?

비동기 콜백 내 값 변조

인스턴스 재활용으로 인한 비동기 함수 내 props, state 변조 현상

많은 코드 작성량

함수형 컴포넌트로 대체 가능한 불편하고 긴 문법

this 바인딩

브라우저 이벤트 핸들러 내 인스턴스 속성, 메서드 참조 시 this 값이 변경됨

 

 

---

 

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다