잘못된 부분이 있거나 수정이 필요한 부분에 대한 피드백 환영입니다! 😁
[참고 서적] : 모던 JavaScript Deep Dive
[질문 검색] : https://stackoverflow.com/questions/52886075/why-is-getderivedstatefromprops-is-a-static-method
먼저 이 질문에 대한 내용을 이해하기 위해서 먼저 정적 메서드에 대해 알아보겠습니다.
정적 메서드란?
인스턴스를 생성하지 않아도 호출할 수 있는 메서드
정적 메서드 vs 프로토타입 메서드
- 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다릅니다.
- 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출합니다.
- 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있습니다.
[정적 메서드]
class Square {
// 정적 메서드
static area(width, height) {
return width * height;
}
}
console.log(Square.area(10, 10)); // 100정적 메서드는 클래스로 호출해야 하므로 정적 메서드 내부의 this는 인스턴스가 아닌 클래스를 가리킵니다.
[프로토타입 메서드]
class Square {
constructor(width, height) {
this.width = width;
this.height = height;
}
// 프로토타입 메서드
area() {
return this.width * this.height;
}
}
const square = new Square(10, 10);
console.log(square.area()); // 100프로토타입 메서드는 인스턴스로 호출해야 하므로 프로토타입 메서드 내부의 this는 프로토타입 메서드를 호출한 인스턴스를 가리킵니다.
즉, 프로토타입 메서드와 정적 메서드 내부의 this 바인딩이 다릅니다.
물론 메서드 내부에서 this를 사용하지 않더라도 프로토타입 메서드로 정의할 수 있지만, 인스턴스를 생성한 다음 인스턴스로 호출해야 하므로 this를 사용하지 않는 메서드는 정적 메서드로 정의하는 것이 좋습니다.
기존에 사용하던 몇 가지 생명 주기 메서드의 문제점
getStaticDerivedStateFromProps가 등장하게 된 이유가 작성된 md 파일을 참고했습니다.
[006-static-lifecycle-methods.md]
오류가 발생하기 쉬운 render 단계의 수명 주기 hooks를 정적 메서드로 대체하여 비동기 호환이 가능한 React 구성 요소를 더 쉽게 작성할 수 있습니다.
기존의 components가 비동기화 준비 상태가 될 수 있도록 명확한 마이그레이션 경로를 제공합니다.
모든 정확한 내용을 아직 이해하긴 어려웠으나, 이해한 부분을 요약해보자면
componentWillMount, componentWillUpdate, componentWillReceiveProps를 사용함에 있어서 비동기 렌더링에 안전하게 사용하기에는 잠재적인 함정이 많기 때문이다. 라고 명시되어 있습니다.
그 부분에 대한 예시는
-
componentWillMount에서 Flux stores를 초기화 할 때 : 이것이 실질적인 문제인지, 잠재적인 문제인지(예를 들어, store 또는 dependencies가 추후에 변경될 경우) 불분명한 경우가 많습니다. 이러한 불확실성 때문에 피해야 합니다. -
componentWillMount에서 event listener/subscription가 추가되거나 제거될 때 : 이로 인해 초기 렌더링이 완료되기 전에 중단되거나 오류가 발생하면 누수가 발생할 수 있습니다. -
componentWillMount,componentWillUpdate,componentWillReceiveProps또는render에서의 비멱등성 외부 함수 호출(예를 들어, 여러 번 호출될 수 있는 콜백 등록, 트리거 불변성의 방식으로 공유 컨트롤러를 초기화하거나 구성할 때 등)
❗️멱등성(idempotent) : 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질, 연산을 여러 번 반복해도 한 번만 수행된 것과 같은 성질
등장한 새로운 정적 메소드 getDerivedStateFromProps
기존의 사용하던 componentWillMount, componentWillUpdate, componentWillReceiveProps를 사용하지 않는 대신, 새로운 정적 메서드인 getDerivedStateFromProps가 등장했습니다.
결론적으로 정리하자면
- 기존의 메서드를 사용할 때 비동기 렌더링에 있어 잠재적인 함정이 존재
- 이를 해결하기 위해
- 더 명확하고 제한된 목적을 가진 수명 주기 메서드명을 선택
- 인스턴스 속성에 대한 안전하지 않은 엑세스를 방지하기 위해 특정 수명 주기를 정적으로 제작(
getDerivedStateFromProps)
getDerivedStateFromProps는 this.props를 다음 props와 비교하면 성능에 영향을 미치는 이전 props 값을 저장해야 하기 때문에 this와 메모제이션의 오용을 방지하기 위해서 static으로 제작되었습니다.
마치며..
이 궁금증을 알아보기 위해 여러 사이트를 참고해 왜 getDerivedStateFromProps 는 static을 사용했는지, 기존에 사용하던 메서드는 왜 문제가 있었는지에 대한 기본적인 이해가 가능했습니다. 기존에는 ‘최신 기술을 받아들이고 그 부분만 잘 사용하면 된다’라는 인식을 가지고 있었습니다. 하지만 점점 공부를 해나갈수록 이 기능이 왜 문제가 생겼는지, 왜 생성되었는지에 대한 근본적인 원인에 대해 궁금증이 커져갔습니다.
앞으로는 최신 기술만을 받아들여서 쓸 부분이 아닌 클래스형태로 사용하던 React에 대해서도 알아봐야겠다는 생각이 들었습니다. 그리하여 기존에 들을 필요성을 못느꼈던 [ReactJS로 영화 웹 서비스 만들기] 에서 클래스 컴포넌트의 사용 방법도 직접 학습해보며 익혀야겠다는 생각이 들었습니다.
글 읽어주셔서 감사합니다. 🙇♂️
