React에서 super() 사용

슈퍼()란?

super()는 기본 또는 상위 클래스의 constructor를 호출하는 데 사용되는 JavaScript의 키워드입니다. 부모 클래스의 변수와 속성에 액세스할 수 있도록 합니다.

React 클래스가 ES6 구문을 사용하여 React.Component에서 확장하거나 상속한다는 것을 알고 있으므로 부모 클래스 변수, 메서드에 대한 액세스를 제공합니다.

통사론

컴포넌트가 생성되거나 DOM에 삽입될 때 super()가 가장 먼저 호출되기 때문에 클래스의 constructor에서 항상 constructor를 호출해야 합니다.

class Counter extends React.Component {
  constructor(props) {
    super(props); 
    this.state = { count: 0 };
  }
  // ...
}

슈퍼(소품) 사용

이제 실제 구현으로 super에 대해 이야기해 봅시다.

슈퍼(소품) 없이

이 예에서는 super(props)를 사용하지 않습니다.

import React from "react";

class Counter extends React.Component {
    constructor(props) {
        console.log(this.props);
    }
    render() {
        console.log(this.props);
        return null;
    }
}

export default Counter;

출력: 위의 코드를 실행하면 콘솔에 오류가 기록됩니다.

설명: 이것은 우리의 자식 클래스 생성자, 즉 여기서 Counter 클래스가 this 에서 constructor 키워드를 인식하지 못하기 때문입니다. this 를 호출하여 호출할 수 있는 부모 클래스의 생성자를 호출하기 전에 super() 키워드를 사용할 수 없습니다. 그러나 생성자 외부의 코드는 영향을 받지 않습니다.

슈퍼(소품) 포함

이 예에서는 이 키워드를 사용하기 전에 super(props)를 사용합니다.

import React from "react";

class Counter extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);
    }
    render() {
        console.log(this.props);
        return null;
    }
}

export default Counter;

출력: 위의 코드를 실행하면 콘솔에 개체가 기록됩니다.



설명: 이제 소품이 콘솔에 로그인되고 있습니다.

결론적으로 super()는 상위 클래스의 생성자, 즉 위의 예에서 React.Component를 호출합니다. 따라서 props를 super에 전달하면 this에도 할당됩니다.

그래서 이것은 우리에게 또 다른 질문을 남깁니다. 왜 super에서 props를 전달합니까?

슈퍼()와 슈퍼(소품)의 차이점

props에서 super()를 전달하지 않더라도 React가 this.props를 호출한 직후 인스턴스에 render를 할당하기 때문에 props 및 기타 메서드에서 constructor에 액세스할 수 있습니다.

감독자()

class Counter extends React.Component {
    constructor(props) {
        super();                 // not passing props
        console.log(props);      // {}
        console.log(this.props); // undefined
}
  // ...
}

this.props 호출과 undefined의 끝 사이에 super가 여전히 constructor 있다는 것을 알아차렸나요? 왜냐하면 React는 나중에 생성자가 실행된 후에 this.props를 할당하기 때문입니다.

슈퍼(소품)

class Counter extends React.Component {
    constructor(props) {
        super(props);             // passing props
        console.log(props);       // {}
        console.log(this.props);  // {}
}
  // ...
}

이렇게 하면 this.props가 종료되기 전에도 constructor가 설정됩니다. 그렇기 때문에 꼭 필요한 것은 아니지만 항상 super(props)를 전달하는 것이 좋습니다.

마무리

우! 오늘은 너무했다. 우리의 작은 두뇌에 약간의 시간을 주자.
소중한 것을 읽고 배워 주셔서 감사합니다. 이 글이 도움이 되셨다면 좋아요와 공유 부탁드리며, 궁금한 점이 있으시면 주저하지 말고 댓글로 질문해주세요.


좋아요 • 공유 • 댓글


💻 행복한 코딩

모아잠 알리 팔로우

Hi there, I am Moazam Ali, a Frontend Engineer based in Pakistan. Having around 2+ years of experience in frontend development.