5.5.1 componentWillMount()

컴포넌트 라이프사이클에서 componentWillMount()가 단 한 번만 실행된다는 점에 대해 이야기해야겠다. 실행 시점은 초기 렌더링 직전이다.

ReactDOM.render()를 호출해서 React 엘리먼트를 브라우저에 렌더링하는 시점에서 componentWillMount()가 실행된다. React 엘리먼트를 실제 DOM 노드에 추가하는 시점으로 생각하자. 이 과정은 브라우저와 프론트엔드에서 이뤄진다.

React 컴포넌트를 서버(동형 자바스크립트를 이용한 백엔드를 말한다. 16장 참조)에서 렌더링하면 기본적으로 HTML 문자열을 얻을 수 있는데, 서버에는 DOM이 없으므로 HTML을 DOM에 추가하는 작업은 없지만, 서버 렌더링 과정에서도 componentWillMount()는 실행된다!

4장에서 상태에 있는 currentTime을 Date와 setInterval()로 갱신하는 것을 살펴봤다. constructor()에서 launchClock()을 호출해서 일련의 갱신을 수행하도록 했다. componentWillMount()에서도 그렇게 할 수 있다. 일반적으로 상태를 변경하면 다시 렌더링된다. componentWillMount() 메서드에서 setState()를 이용해서 상태를 갱신하거나, Clock 컴포넌트의 경우처럼 일정한 간격으로 갱신되도록 처리하면, render()에서 갱신된 상태 객체를 사용한다. 가장 좋은 점은 componentWillMount()에서 갱신하는 새로운 상태에 차이점이 있어도 재렌더링되지 않는다는 점인데, 이것이 가능한 이유는 render()에서 새로운 상태 값을 가져오기 때문이다. 다시 말해, componentWillMount()에서 setState()를 실행할 수 있다. render()는 새로운 상태를 가져와서 렌더링하므로 상태 변경에 따른 추가적인 렌더링을 하지 않는다.