"super()"와 "super(props)"을 사용할 때, React에서 es6 클래스를 사용하는 경우의 차이점은 무엇인가요?

언제 props를 super()에 전달하는 것이 중요하며, 그 이유는 무엇인가요?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // 혹은 super(props) ?
  }
}

답변 1

주의하세요. super에 props를 전달하든 전달하지 않든 이후에 constructor 외부의 this.props를 사용하는 것에는 영향을 미치지 않습니다.. 즉 render, shouldComponentUpdate, 이벤트 핸들러 등에서 항상 접근할 수 있습니다.

이것은 Sophie Alpert의 답변에서 비슷한 질문에 명확히 언급되었습니다.

문서인 — 상태와 생명주기, 클래스에 로컬 상태 추가, 2번째 항목 — 다음을 권장합니다:

클래스 컴포넌트는 항상 props와 함께 기본 생성자를 호출해야 합니다.

그러나 어떤 이유도 제공되지 않습니다. 우리는 하위 클래스화 또는 장래의 호환성을 위해서일 수 있다고 추측할 수 있습니다.

(링크 제공: @MattBrowne님)

답변 2

When developing React applications using ES6 classes, it is important to understand the difference between super() and super(props). These two expressions may seem similar, but they have distinct purposes and functionalities. In this essay, we will delve into the dissimilarities between super() and super(props) in React, thereby shedding light on their significance for creating efficient and robust applications.
Before we delve into the differences, let us briefly introduce the concept of ES6 classes in React. ES6 classes are an integral part of modern JavaScript, offering a convenient way to define and manage components in React. These classes serve as blueprints for creating reusable components that encapsulate both state and behavior.
Now, let us move on to discussing super() and super(props) one by one, starting with super(). In React, super() is used in the constructor of a subclass to invoke the constructor of its superclass. Essentially, it ensures that the subclass properly inherits all the properties and methods from its superclass. When using super() in React, we are not passing any arguments. It is necessary to call super() at the beginning of the subclass constructor if we want to access the this keyword, as it sets the reference to the superclass.
On the other hand, super(props) is used when we want to access the props object within the constructor of a subclass. In React, the props object contains the properties passed to a component when it is rendered. By utilizing super(props), we can conveniently access and initialize the props object within the subclass constructor. This is particularly useful when we want to assign props to the state or perform any other computations based on the received props.
To summarize, the key difference between super() and super(props) lies in their parameter usage. While super() solely invokes the constructor of the superclass, super(props) achieves the same objective while also allowing access to the props object within the subclass constructor. Understanding and correctly implementing these statements in the constructor of React components is crucial for smooth component inheritance and efficient development.
In conclusion, when working with ES6 classes in React, it is important to distinguish between super() and super(props). Although they both serve the purpose of invoking the superclass constructor, super(props) additionally grants access to the props object within the subclass constructor. By utilizing these statements effectively, we can ensure proper component inheritance and make the most of the powerful features offered by React.