SUPER(PROPS)에 대해서

클래스 컴포넌트의 개념에 대해 정리를 하면서 순간에서 생겨난 궁금증.

 

super(props)를 적는 이유는?  

 

구글링을 한 결과  super(props)이 없으면 this.props 사용 시 생성자 내에서 정의되지 않아 버그 발생 가능성이 생기기 때문이라고 한다.

 

그렇다면  super()는 무엇일까?

 

목표 : super(props)에 대해 알아보자.

 

 

 

 

자바스크립트에서 super는 부모클래스 생성자를 참조한다는 의미이다.

 

그리고 자바스크립트는 언어적 제약사항으로서 생성자에서 super 를 호출하기 전에는 this를 사용할 수 없다고 한다.

 

 

하나의 예를 들어보자.

class Parents{
    constructor(name) {
        this.name = name;
    };
};

class Child extends Parents {
    constructor(name) {
        this.goodMorning();
        super(name);
    };

    goodMorning() {
        alert('wake up!' + this.name);
    };
};

 

 

this.name은 Parents 클래스 안에 있는 내용이다.

 

Child 클래스는 Parents 클래스를 참조하고 있다. Child 클래스의 goodMoring() 메서드에 이름(this.name)을 추가해야되는 상황.

 

여기서! 문제가 발생한다.

 

 

ParentsComponent 클래스의 props(this.name)를 참조하기 전에 goodMoring 메서드가 호출되어 안에 있는 this.name을 불러오려고 하기 때문.

즉, this.name을 불러오지도 못했는데 goodMorning는 this.name을 불러오고 있는 것.

 

 

그렇다면

 

super()에 props를 인자로 넣어야하는 이유는 무엇일까?

사실 props를 인자로 넣지 않아도 react는 올바르게 작동한다.

 

하지만 this.props를 초기화하지 못한다.

 

React.Component 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props 를 전달하기 때문.

 

 

 

이건 또 무슨 말일까?

 

class Parents {
  constructor(name) {
    this.name = name;
  }
}
export default class Child extends Parents {
  constructor(name) {
    super();
    console.log(name);
    console.log(this.name);
  }
}

let gang = new Child("minseung");

다음은 props와 this.props를 console.log에 찍어본 결과이다.

 

 

 

생성자(constructor)안에서 찍은 console.log는 다른 것을 확인할 수 있다.

 

props와 this.props는 다른 것이다.

 

리액트는 컴포넌트의 생성자를 호출 한 후, props를 세팅을 해준다고 한다.
super()에 props를 넣지 않고 단지 super()라고만 하면 생성자 호출 이후 '생성자 내부'에서 this.props는 undefined가 될 것이다.

 

super()만 사용하게 된다면 언젠가 this.props를 사용할 수 없을때가 올 것이기 때문에 props를 적어주는 것.

 

super(props)는 왜 써야하는 건가에서 출발한 것이었는데 이해하는 과정은 너무 힘들었다.