2장에서 컴포넌트 생성 방법을 살펴보았는데, 컴포넌트를 좀 더 세밀하게 제어해야 할 경우가 있다. 예를 들어 화면 너비에 따라 크기가 변경되는 라디오 버튼 컴포넌트를 만드는 경우를 생각해 볼 수 있다. 다른 예로 서버에 XHR 요청을 보내 정보를 가져오는 메뉴 컴포넌트를 개발해야 하는 경우도 있을 것이다.

세밀하게 제어하기 위한 방법으로 컴포넌트 인스턴스 생성 전에 필요한 로직을 구현한 후 새로운 속성을 제공해서 인스턴스를 재생성하는 방법을 생각해볼 수 있다. 그렇지만 이 방법으로는 독립적인 컴포넌트를 생성할 수 없으므로 React가 제공하는 컴포넌트 기반 아키텍처의 이점을 살리기 어렵다.

가장 좋은 방법은 컴포넌트 라이프사이클 이벤트(component lifecycle events)를 사용하는 것이다. 마운팅 이벤트를 이용해서 컴포넌트에 필요한 로직을 주입할 수 있다. 그 외에도 다른 이벤트를 이용하면, 뷰가 다시 렌더링하는 것을 결정하는 특별한 로직을 제공해서 좀 더 똑똑한 컴포넌트를 만들 수도 있다(React의 기본 알고리즘을 덮어쓴다).

라디오 버튼과 메뉴 컴포넌트의 사례를 다시 생각해보면 버튼 컴포넌트를 생성할 때 window의 이벤트(onResize)에 연결한 다음, 컴포넌트를 제거할 때 연결을 제거할 수 있다. 메뉴 컴포넌트는 React 엘리먼트를 실제 DOM에 삽입(mount)하고 나서 서버에서 데이터를 가져올 수 있다.

이제부터 컴포넌트 라이프사이클 이벤트를 정복해보자!