[React] super(props)

 

 

class Checkbox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isOn: true };
    };
    // ...
};

super (props) 사용

클래스 필드 문법을 사용한다면 사용하지 않아도 됩니다.

 

class Checkbox extends React.Component {
    state = { isOn: true };
    // ...
};

 

왜, super를 선언하는지, super를 사용하였을때 props를 넣어주지 않으면 어떤 일이 발생하는지 ...에 대해 작성해 보았습니다.

1. super 선언하는 이유
   javascript에서는 super 키워드 실행 후 this를 사용할 수 있게 했습니다. React도 마찬가지 입니다.
   만약, this를 super 호출 전에 사용하는 것이 가능하다고 생각을 해 봅시다.
   추후에 greetColleagues 메서드에 메시지를 추가해야 하는 상황에, this.greetColleagues() 가 super() 를 불러오기 전에 실행되어 버립니다.
   this.name은 아직 변경이 되지 않았습니다.(초기화 되기 이전) 이와 같은 코드를 보는 것은 논리를 굉장히 복잡하게 만들 수 있습니다.
   super은 이것을 방지하는 것 입니다.

   class Person {
       constructor(name) {
           this.name = name;
       };
   };
   
   class PolitePerson extends Person {
       constructor(name) {
           this.greetColleagues(); // 이것은 허용되지 않는다. 이유를 읽어보자
           super(name);
       };
        
       greetColleagues() {
           alert('Good morning folks!');
       };
   };​

    
2. props를 넣어주지 않으면 무슨 일이 발생할까?
   super(props) 는 무슨 일을 하는 것일까요?
   React.Component에서 this.props에 초기 설정을 하기 위해 props를 super에 넣어준다고 생각할 수도 있습니다.
   사실에 가까운 말이고, 실제로 하는 일입니다.
   
   그러나, 어떤 경우에는 super 키워드 안에 props를 작성하지 않아도 render 메서드에서 this.props를 사용할 수 있습니다.
   
   React는 constructor 가 올바르게 불려지고 난 이후에 props를 불러옵니다.
   
   그래서 만약에 super() 안에 props 추가하는 것을 기억하지 못하더라도, 리액트는 여전히 올바르게 작동합니다.
   
   그러나 super(props) 대신에 super()를 작성하면 혼란스럽게 할 것입니다.
   
   물론 리액트는 constructor가 실행된 후 this.props를 할당합닌다.
   그러나 constructor에서 super()가 불려진 이후에도 this.props는 여전히 undefined 일 것입니다.
   

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

   
   
   이러한 코드는 constructor 사이클이 끝나기 전 this.props 가 생성되는 것을 보장합니다.
    

클래스 필드 문법은 이런 문제점을 대부분 해결해 줍니다.

 

출처 : super(props)를 써야 하는 이유

 https://velog.io/@honeysuckle/%EB%B2%88%EC%97%AD-Dan-Abramov-%EC%99%9C-superprops-%EB%A5%BC-%EC%9E%91%EC%84%B1%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80

Dan Abramov - 왜 super(props) 를 명시해 줘야 하는가?