동기
때는 바야흐로 2시간 전, 코로나에 고양으로 내려와 React 문서를 보던 참이었다. 메인 컨텐츠 6번의 handling events를 읽던 중에 내가 익숙한 패턴의 코드가 public class field syntax라는 생소한 이름을 가지고 있다는 것을 알게 되었다. 예시는 하이퍼링크에 있으니 의미와 장단점만 적어보고자 한다. 의미는 정확하지 않을 수 있으나 장,단점은 내가 이해하기로 명확한 것만 적겠다.
의미
public class field syntax는 함수와 변수의 선언을 각 인스턴스에 bind를 기본으로 하는 ES6부터 시작한 실험적인(이제는 아닐 수도...) 문법이다. 즉, 기존 ES5에서 했던 것처럼 constructor에서 변수 선언과 함수바인드를 하는 것이 아니라, 클래스의 선언에서부터 인스턴스에 바인드 되는 것을 전제로한 문법이다. 함수선언은 arrow func쓴다.
장점
따로 바인드, 함수 선언을 위한 constructor를 개발하지 않아도 되기 때문에 보기 좋다.
단점
1. 각 인스턴스마다 새로 함수 선언이 되기 때문에 굉장히 많은 컴포넌트를 가질 경우 overhead가 커질 수 있다. 조금 부가설명을 하자면, constructor에서 바인드하면 함수 선언은 함수 prototype에 더해져 한번만 선언된다. 하지만 public class field syntax는 각 인스턴스마다 새로운 등장해 매번 선언되어 메모리, 시간을 낭비한다.
2. 바벨과 같은 도구를 사용하면 크롬 외의 브라우저에서도 호환되나 어쨌건 아직 표준이 아니다.
결론
constructor에서 bind를 쓰는게 아직까지는 좋은 방법인거 같다. 물론 내 블로그 만들때는 공식 문서가 권장하는 public class field syntax쓸거다.
참조
Learn Public Class Field Syntax by Refactoring a React Component
React — Event handling, binding, ES6 classes and public class fields
추신
틀린 거, 질문, 오타 지적을 환영합니다. 인신공격은 경고없이 지울 수도 있어여.
읽기 힘든 글을 써서 죄송합니다. 허허.