슈퍼() 대 슈퍼(소품)

🚀

If you want to use this.props inside the constructor of derived class, use super(props).

반응 코드를 확인하는 동안 라인 super(props) , 때로는 super() 을 만났을 수 있습니다. 둘의 차이점이 무엇인지 궁금하신가요?
통과해야 하는 이유props? 항상 통과해야 합니까props?

아래의 예를 고려하십시오.

import React, { Component } from 'react';
class Game extends Component {
    constructor(props) {
      super(props);
        this.state = {
          player : "Robin",
          score : 25
        }
    }
    render() {
        return (
            <div>
                <h1>Cricket</h1>
                <p>Current Player :{this.state.player}</p>
                <p>Current Score : {this.state.score}</p>
            </div>
        );
    }
}
export default Game;

구성 요소를 작성할 때마다 우리는 React 구성 요소(기본 구성 요소 클래스)에서 확장하고 있으며 그렇게 하지 않으면 수많은 반응 기능을 놓칠 수 있습니다.

잠시 반응 세계에서 벗어나 우리 자신의 컴포넌트 클래스를 모방해 봅시다.

class Component {
    constructor() {
        console.log("INSIDE COMPONENT CONSTRUCTOR")
    }
}
class Game extends Component {
    constructor(){
        console.log("INSIDE GAME CONSTRUCTOR")
    }
}

새로운 게임을 만들자

let cricket = new Game();

따라서 새 게임을 초기화할 때 생성자가 호출되고 출력되어야 한다고 생각할 수 있습니다. 불행히도 오류가 발생합니다.
'this'에 액세스하기 전에 슈퍼 생성자를 호출해야 합니다. 느슨하게 번역하면 기본적으로 어떤 작업을 수행하기 전에 파생 클래스에서 슈퍼 생성자를 호출합니다.

문제는 우리가 기본 클래스를 확장하고 있지만 실제로 생성자를 호출한 적이 없으며 파생 클래스의 생성자(여기서는 게임 내부 생성자)에서 수행하는 것이 매우 중요하다는 것입니다. 클래스(생성자)를 호출하고 있는지 확인해야 합니다. 특히 React에서 확장되고 있습니다. 왜냐하면 그것이 우리가 React가 수행하고 우리를 위해 즉시 처리하는 모든 마법의 설정을 호출하는 방법이기 때문입니다. 그래서 우리는 super()

class Game extends Component {
    constructor(){
      super()
        console.log("INSIDE GAME CONSTRUCTOR")
    }
}

이제 다시 인스턴스화를 시도하십시오.

let cricket = new Game();
//output:
  //INSIDE COMPONENT CONSTRUCTOR
  //INSIDE GAME CONSTRUCTOR

그러면 super(props)는 무엇을 합니까?

이 예를 살펴보겠습니다.

import React, { Component } from 'react';

export default class Food extends Component {
    render() {
        return (
            <div>
                <h1>HI I AM FOOD COMPONENT</h1>
            </div>
        );
    }
}

import React, { Component } from 'react'
import Food from "./Food"
class App extends Component {
  render(){
    return (
    <div>
      <Food item = "PineApple" nutrition="10"/>
    </div>);
  }
}

export default App;

Food 컴포넌트에 두 개의 소품을 전달합니다. Food 클래스new Food({item : "pineapple", nutrition: "10"})에 대해 두 개의 객체를 생성하는 것처럼 생각할 수 있습니다.

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super();
        console.log(this.props); // undefined.
    }
    render() {
        return (
            <div>
                <h1>HI I AM FOOD COMPONENT</h1>
            </div>
        );
    }
}

props가 있더라도 Undefined로 출력을 얻습니다. 자, 여기서 일어나는 일은 생성자에서 this.props에 액세스하려면 super( super(props) )에서 props를 전달해야 한다는 것입니다. 이것은 일종의 기이한 일입니다. 이 예를 고려해 보겠습니다.

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super();
        console.log(this.props); // undefined.
        console.log(props) // {item:"pineapple", nutrition:10}
    }
    render() {
        return (
            <div>
                <h1>{this.props.item}</h1> /*Prints out pineapple*/
            </div>
        );
    }
}

그러나 당신이 할 경우

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super(props);
        console.log(this.props); // {item:"pineapple", nutrition:10}
    }
    render() {
        return (
            <div>
                <h1>{this.props.item}</h1> /*Prints out pineapple*/
            </div>
        );
    }
}

결론적으로 생성자 내부에서 this.props 를 사용하려면 super() 에 props를 전달해야 합니다. 그렇지 않으면 super(), this.props )는 render() 함수 내에서 사용할 수 있습니다.

바라건대 그것은 다음 시간까지 복잡하고 미친 것이 아닙니다. 행복한 코딩! 🎉 💻