React 구성 요소가 있는 생성자 이해

생성자는 클래스에서 객체를 생성하는 동안 자동으로 호출되는 메서드입니다. 개체의 일부 속성을 기본값으로 설정하거나 전달된 인수의 온전성 검사와 같은 초기 설정 작업을 처리할 수 있습니다. 간단히 말해서 생성자는 구성을 돕습니다.

React에서는 생성자도 다르지 않습니다. 이벤트 처리기를 구성 요소에 바인딩하거나 구성 요소의 로컬 상태를 초기화하는 데 사용할 수 있습니다. constructor() 메서드는 구성 요소가 마운트되기 전에 실행되며 React의 대부분과 마찬가지로 사용할 때 따라야 하는 몇 가지 규칙이 있습니다.

this.props를 사용하기 전에 super(props)를 호출하세요.

생성자의 특성으로 인해 this.props 객체는 게이트 밖에서 바로 사용할 수 없으며 버그로 이어질 수 있습니다. 이 생성자는 오류를 발생시킵니다.

constructor() {
  console.log(this.props);
}

대신 constructor()에서 props 값을 가져와 super() 메서드에 전달합니다.

constructor(props) {
  super(props);
  console.log(this.props);
}

super() 메서드를 호출하면 React 구성 요소의 경우 React.Component인 부모 클래스의 생성자를 호출합니다.

생성자() 내에서 setState()를 호출하지 마세요.

구성 요소의 생성자는 구성 요소의 초기 상태를 설정하기에 완벽한 장소입니다. 클래스의 다른 메서드에서 하는 것처럼 setState()를 사용하는 대신 초기 상태를 직접 설정해야 합니다.

constructor(props) {
  super(props);

  this.state = {
    reptile: 'alligator',
    color: '#008f68',
  };
}

이렇게 로컬 상태를 직접 할당해야 하는 곳은 생성자뿐입니다. 컴포넌트의 다른 위치에서는 대신 setState()에 의존해야 합니다.

this.props에서 this.state로 값을 할당하지 마세요.

생성자에서 초기 구성 요소 상태를 설정할 때 속성에서 값을 설정하지 않도록 해야 합니다.

다음과 같이 할 때:

constructor(props) {
  super(props);

  this.state = {
    reptile: props.reptile,
  };
}

나중에 setState()를 실행하고 속성을 업데이트하는 기능을 잃게 됩니다.

속성을 상태에 직접 할당하는 대신 this.props.reptile을 호출하여 코드에서 직접 속성을 참조할 수 있습니다.

모든 이벤트를 한 곳에서 바인딩

실제로 규칙이나 문제는 아니지만 생성자에서 이벤트 핸들러를 쉽게 바인딩할 수 있다는 점은 주목할 가치가 있습니다.

constructor(props) {
  super(props);

  this.state = {
    // Sets that initial state
  };

  // Our event handlers
  this.onClick = this.onClick.bind(this);
  this.onKeyUp = this.onKeyUp.bind(this);
  // et cetera...
}

constructor()에서 부작용이나 구독을 사용하지 마세요.

알겠습니다. 방금 새 구성 요소를 만들었고 API에서 데이터를 가져오고 값을 상태로 설정하기를 원합니다. 구성 요소가 마운트되기 전에 생성자에서 이 작업을 수행하는 것이 완벽합니다.

잘못된!

상태 및 기타 부작용을 업데이트하는 구독과 같은 경우 구성 요소가 마운트된 직후에 실행되는 componentDidMount()에 논리를 배치해야 합니다. 내부의 상태를 업데이트합니다.

생성자도 필요합니까?

생성자는 매우 편리하지만 때로는 너무 많습니다. 구성 요소에서 상태를 유지할 계획이 없고 이벤트 핸들러를 바인딩하지 않는 경우 생성자를 정의할 필요가 전혀 없습니다.

실제로 상태 또는 이벤트 핸들러가 필요하지 않은 경우 클래스 기반 구성 요소가 전혀 필요하지 않을 수 있습니다. 약간의 추가 입력을 저장하고 기능적 구성 요소를 사용할 수 있습니다.