이 장을 시작할 때 언급한 크기를 변경해야 하는 라디오 버튼 컴포넌트와 서버에서 데이터를 가져오는 문제로 돌아가보자. 먼저 componentDidMount()에서 window.resize 이벤트를 구독하는 이벤트 리스너를 생성할 수 있다. 다음으로 componentDidMount()에서 XHR 요청을 보낸 후 서버에서 응답이 오면 상태를 갱신하게 만들 수 있다.

동형 자바스크립트로 서버와 브라우저에서 같은 컴포넌트를 사용하는 경우에도 componentDidMount()는 똑같이 중요하다. componentDidMount() 메서드에 브라우저만을 위한 로직을 넣어도 서버 측에서는 호출하지 않고 브라우저에서만 호출하므로 안심해도 좋다. React를 이용한 동형 자바스크립트에 대해서는 16장에서 자세히 설명한다.

대부분의 개발자는 예제를 보면서 배우는 것에 익숙하다. 따라서 componentDidMount()에서 DOM 정보를 콘솔에 출력하는 단순한 예제를 살펴보자. 이렇게 할 수 있는 이유는 componentDidMount()가 모든 렌더링 작업이 완료된 후에 실행되기 때문이다. 이 시점에서는 DOM 요소에 접근할 수 있다.

컴포넌트 라이프사이클 이벤트에 대한 이벤트 리스너를 생성하는 것은 간단하다. 컴포넌트나 클래스에 메서드를 정의하면 된다. componentWillMount()를 추가하여 실제 DOM이 존재하지 않는다는 점을 비교해보자.