React를 공부하기 시작하면서 Class component와 Function component를 알아가던 중, 동기 중 한 분이 Class component에서 State를 사용할 때, Constructor method와 Super method를 사용하는 이유에 대해 궁금해하는 블로그 글을 보았다. 클래스 컴포넌트에서 사용되는 Consturctor와 Super, 왜 쓰는걸까?
🤚들어가기전에 클래스형 컴포넌트!
- React를 사용할 때 컴포넌트를 정의하기 위해서는 두가지 방법을 사용한다
- 함수로 정의!
- CLASS로 정의
- 이 방법을 위해서는 React.Component를 상속받아야 한다.
- 또한
render()는 하위 class에서 필수로 정의해야 하는 메소드이다.- render메소드는 렌더링하고 싶은 JSX를 반환한다
- 그리고 component의 state(상태)를 적용하기 위해
constructor(props)와super(props)를 사용하는 이유를 알아보자
🤚 먼저 constructor()를 사용하는 이유!
-
Constructor(), 한글로는 생성자라 불리는 함수는 state(컴포넌트의 상태) 값을 초기화 하거나 메서드를 바인딩 할 때 사용한다
-
또한 해당 컴포넌트가 마운트 되기 전 호출된다
-
- 마운트는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미
- 이는 컴포넌트 라이프 사이클을 분류할때 3가지로 나눠지는
- Mount, Update, UnMount 중 가장 첫번째로 오는 컴포넌트 라이프 사이클 단계이다.
- Update: props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, 등을 의미한다
- UnMount: 컴포넌트가 DOM에서 제거되는 것을 언 마운트라고 한다.
- Mount, Update, UnMount 중 가장 첫번째로 오는 컴포넌트 라이프 사이클 단계이다.
-
-
- 바인딩은 클래스와 메서드 간의 연관관계를 의미
- 클래스와 관련된 메서드는 클래스에 바인딩 할 수 있다.
-
- 자바스크립트는 호출하는 함수에 객체를 바인딩 해주지 않으면 전역 객체로부터 값을 받아온다.
- 그래서 우리는 생성자(constructor)에서 컴포넌트 객체에
this의 이벤트 핸들러를 바인딩 해주는 것이다. - Constructor 생성자 만으로 컴포넌트 객체에 메서드를 바인딩한다면
super메서드를 사용하는 이유는 무엇일까?
🤚 super()를 사용하는 이유!
React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서super(props)를 호출해야 합니다. 그렇지 않으면this.props가 생성자 내에서 정의되지 않아 버그로 이어질 수 있습니다.
왜 this.props가 생성자 내에서 정의되지 않는 것일까? 일단 super에 대해서 알아보자
자바스크립트에서 super 는 부모 클래스 생성자를 가리킨다
-
그리고 중요하게도 super(props) 선언전까지 constructor에서
this키워드를 사용할 수 없다. 자바스크립트에서는!! -
리액트에서는 super가 constructor와 this의 실행순서로 인해 발생하는 문제로 인해 사용하는 것을 권고한다.
-
✍️만약 리액트에서 super()를 선언하기 전에 this를 사용한게된다면?
- consturctor가 호출된 이후에 props가 세팅된다.
- 그렇다면 초기화되었기에 생성자 내부의 this.prop은 undefined가 된다
- 초기에는 문제가 되지 않는다. 하지만 만약에 후에 constructor의 다른 메서드를 수정하고 싶다면?
- 해당 메서드가 super()가 불러오기 전에 실행된다. 그러므로 this는 아직 변경되지 않았기 때문에 에러가 발생한다.
🤚 느낀점
더 자세한 내용은 위 블로그에서 확인할 수 있다. 그냥 지나갈 수 있었지만 이번 블로깅을 통해 리액트와 조금 더 친해졌다. YEE!
감사합니다! 퍼가요~♡