라이프사이클 이벤트를 구현하려면 클래스에 메서드를 정의해야 한다(3.2.5절 참조). 이것은 React의 규칙이다. React는 이벤트 이름에 해당하는 메서드가 있는지 확인한다. React가 메서드를 찾으면 해당 메서드를 실행한다. 그렇지 않은 경우에는 일반적인 흐름대로 진행된다. 이벤트 이름은 자바스크립트의 다른 이름들과 마찬가지로 대소문자를 구분해서 작성해야 한다.

다시 말해, React는 특정 메서드가 정의되어 있다면 컴포넌트의 실행주기 중에 이 메서드를 호출한다. 예를 들어 componentDidMount()를 정의하면 React는 컴포넌트 클래스의 엘리먼트가 DOM에 추가되었을 때 이 메서드를 호출한다. componentDidMount()는 표 5-1에서 마운팅으로 분류되어 있고, 컴포넌트 클래스의 인스턴스마다 한 번만 호출된다.

class Clock extends React.Component {
  componentDidMount() {
  }
  ...
}

 

만약 componentDidMount() 메서드를 정의하지 않는다면 React는 이 이벤트에 대해 아무런 코드도 실행하지 않는다. 따라서 메서드 이름은 이벤트 이름과 일치해야 한다. 앞으로 이 장에서 이벤트, 이벤트 핸들러, 메서드라는 단어를 혼용하여 설명할 것이다.

이름에서 짐작할 수 있겠지만, componentDidMount() 메서드는 컴포넌트가 DOM에 추가될 때 실행된다. 이 메서드는 다른 프론트엔드 프레임워크나 라이브러리와 통합하는 코드나, 서버에 XHR 요청을 보내는 코드를 작성할 때 사용된다. 왜냐하면 라이프사이클의 이 시점에서는 컴포넌트의 엘리먼트가 실제 DOM에 반영되어 자식 엘리먼트를 포함한 모든 엘리먼트에 접근할 수 있기 때문이다.