this.state의 값은 반드시 객체여야 한다. 여기서는 ES6 constructor()에 대해 자세히 다루지 않을 것이다. 부록 E와 ES6 치트시트(https://github.com/azat-co/cheatsheets/tree/master/es6)를 참고하기 바란다. 요점은 객체지향 프로그래밍 언어에서 클래스의 인스턴스가 생성될 때 constructor()가 호출된다는 것이다. 생성자 메서드의 이름은 반드시 constructor로 한다. ES6의 규칙이라고 생각하자. 또한 부모 클래스가 있는 클래스에서 constructor() 메서드를 생성하면 그 안에서 거의 항상 super()를 호출한다. 그렇지 않으면 부모 클래스의 생성자가 실행되지 않는다. 만약 이렇게 상속으로 클래스를 구현하는 경우에 constructor() 메서드를 따로 작성하지 않으면 super()를 호출한 것으로 가정한다.
Note 클래스 속성
기술 위원회 39(Technical Committee 39, TC39; ECMAScript 표준을 제정하는 위원회)에서 추후 버전 ECMAScript의 클래스 문법에 클래스 속성을 추가해주었으면 좋겠다! 클래스 속성 기능이 지원되면 state를 constructor에서 선언하지 않고, 클래스 몸체에 선언할 수 있다.
class Clock extends React.Component {
state = {
...
}
}
클래스 필드/속성/프로퍼티에 대한 제안은 https://github.com/jeffmo/es-class-fields-and-static-properties에 있다. 제안이 이뤄지고 몇 년이 지났지만, 이 책을 집필하는 2017년 3월 현재 아직 Stage 2에 머무르고 있다(Stage 0부터 시작하며 Stage 4가 최종적으로 표준 단계다). 그렇기 때문에 브라우저에서는 아직 사용할 수 없다. 이 기능은 기본적으로 작동하지 않는다. (이 책을 쓰는 현재 클래스 필드를 지원하는 브라우저가 없다.)
브라우저에서 코드를 작동시키려면 Babel, Traceur 같은 트랜스파일러나 TypeScript 등을 이용해야 한다. 클래스 프로퍼티에 대한 ECMAScript 호환성 표(http://kangax.github.io/compat-table/esnext)를 참고하거나 필요하다면 ES.Next Babel preset을 사용하기 바란다.2
2 역주 현재 이 제안은 https://github.com/tc39/proposal-class-fields로 병합되어 Stage 3으로 변경되었다. Babel은 Stage 0~4까지 개별적인 preset을 제공한다. 이 책을 번역하는 시점에서는 babel-preset-stage-3(https://www.npmjs.com/package/babel-preset-stage-3)에 이 제안을 구현한 @babel/plugin-proposal-class-properties(https://www.npmjs.com/package/@babel/plugin-proposal-class-properties)가 포함되어 있다.