React 클래스 구성 요소를 잊으셨습니까? 도와주세요

안녕하세요, React 개발자입니다! 당신은 기능적 구성 요소를 작성하는 방법만 기억/알고 클래스 구성 요소가 아닌 개발자 중 하나입니까? 가능성은 그렇습니다. 그 이유는 React Hooks(기능 구성 요소에서만 사용할 수 있음)의 도입으로 개발자가 클래스 구성 요소를 무시하기 시작했기 때문입니다. 문제는 기존 React 코드베이스에서 거의 항상 클래스 구성 요소를 찾을 수 있다는 것입니다(특히 대기업에 속한 경우). 이 기사에서는 클래스 구성 요소에 대한 가장 짧은 집중 과정을 제공합니다.

[1] 클래스 컴포넌트 생성 및 Prop 접근

class App extends Component {
  render() {
    const { theProp } = this.props;
    return (
      <div>{theProp}</div>
    );
  }
}

클래스 컴포넌트를 생성하고 props에 접근하기 위한 템플릿입니다. 보시다시피 JavaScript의 "this"키워드에 대한 지식은 클래스 구성 요소를 사용하는 데 중요합니다.

[2] 상태

class App extends Component {
  state = {
    items: [],
    total: 0
  }

  render() {
    return <h1>The first item is {this.state.items[0]}</h1>
  }
}

클래스 구성 요소에서는 새롭고 강력한 useState를 사용할 수 없습니다. 상태를 만들려면 상태 데이터를 포함할 개체에 상태를 할당합니다. 다시 말하지만, "this"키워드는 코드를 덜 우아하게 보이게 합니다.

[3] 핸들러

class App extends Component {
  state = {
    items: [],
    total: 0
  }

  handleClick = () => {
    this.setState({
      total: 99
    })
  }

  render() {
    return (
      <div>
        <h1>The first item is {this.state.items[0]}</h1>
        <button onClick={this.handleClick}>Add</button>
      </div>
    )  
  }
}

클래스 구성 요소의 이벤트 처리기에서 setState 메서드를 사용하고 기존 상태의 데이터를 재정의해야 합니다. 이 경우 총계만 99로 설정합니다. 즉, 총계 값만 기존 상태에서 변경됩니다(항목 값은 여전히 ​​동일하게 유지됨).

[4] 라이프사이클 후크

이것들은 useEffect, useState 등과 같은 반짝이는 새로운 React Hooks가 아닙니다. 그러나 componentDidMount() (useEffect와 유사), componentWillUnmount() (정리 기능) 및 componentDidUpdate()를 주시하십시오.