react 클래스 컴포넌트의 super

소개

super(props)는 클래스 컴포넌트를 사용하게 된다면 항상 constructor안에 사용되게 됩니다. 그래서 이번에는 왜 super(props)를 사용하는지 알아 보고 사용하지 않았을때 어떤 이슈가 발생하는지 알아보도록 합시다.

class ClassApp extends React.Component {
  constructor(props) {
    super(props);
  }
}

super()는 자식 클래스가 생성될 때 부모 클래스의 생성자를 참조하는 방법으로 react 클래스 컴포넌트의 부모 클래스는 React.Component가 됩니다. 그리고 주의할 점으로 super를 사용하기 전에는 constructor에서 this를 사용할 수 없습니다.

자바스크립트가 이런 제약사항을 강제하는 데에는 사실 합리적인 이유가 있습니다. 아래와 같은 코드를 생각해 봅시다.

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

class PolitePerson extends Person {
  constructor(name) {
    this.answer();
    super(name);
  }
  answer() {
    alert('good');
  }
}

super 호출 전에도 this 를 사용하는 것이 가능하다고 가정해 봅시다. 아직까지는 문제가 없지만 만약 answer가 this.name을 사용하게 되도록 변경되었다고 했을때

answer() {
    alert('good');
    alert('name: ' + this.name);
}

this.name 이 초기화되기 전에 this.answer가 호출되었습니다. 이런 경우 가독성이 안좋아지기고 이해가 어려워지기에 자바스크립트는 언어 차원에서 this 사용 전에 super 호출을 강제하는 것이고 react 클래스 컴포넌트에서도 동일하게 반영된 것입니다.

super(props)를 쓰는 이유

생성자 호출 이후에 props 를 super에 할당하지 않는경우에는 this.props를 불럿을때 undefined가 뜨지만 할당을 한 경우에는 아래 코드와 같이 props에 대한 값이 출력됩니다.

class Button extends React.Component {
  constructor(props) {
    super(props); // super에 props 할당
    console.log(props);  // ✅ {}
    console.log(this.props); // ✅ {}
  }
  // ...
}

이렇게 super(props) 를 호출하는 것은 생성자 내부에서도 this.props 를 정상적으로 사용할 수 있도록 보장해 줍니다.