5.1 React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기
React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다(컴퓨터 프로그래밍에서 말하는 후킹과 비슷하다. https://ko.wikipedia.org/wiki/후킹). 라이프사이클 이벤트를 분류해보면 다음과 같다.
• 마운팅(mounting) 이벤트: React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가할 때 발생한다.
• 갱신(updating) 이벤트: 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생한다.
• 언마운팅(unmounting) 이벤트: React 엘리먼트를 DOM에서 제거할 때 발생한다.
모든 React 컴포넌트는 라이프사이클 이벤트가 있다.1 라이프사이클 이벤트는 컴포넌트가 수행한 작업이나 앞으로 수행할 작업에 따라 특정 시점에 실행된다. 어떤 이벤트는 한 번만 실행되기도 하고, 어떤 이벤트는 계속해서 실행된다.
라이프사이클 이벤트를 이용하면 컴포넌트의 작업 수행을 향상시키는 사용자 정의 로직을 구현할 수 있다. 예를 들면 라이프사이클 이벤트 중에는 재렌더링 여부를 정할 수 있는 이벤트가 있다. 이 이벤트를 이용하면 불필요하게 렌더링되는 것을 방지하여 성능을 개선할 수 있다. 다른 사용 방법으로는 서버에서 데이터를 가져오거나, DOM 이벤트 또는 다른 프론트엔드 라이브러리와 통합할 때 사용할 수 있다. 각 이벤트 유형에 따른 작동 방식과 성질, 실행 순서에 대해서 자세히 살펴보자.
1 역주 여기서 컴포넌트는 React.Component를 상속받은 컴포넌트 클래스를 말한다. 함수만으로 작성되는 상태비저장 컴포넌트(stateless functional component)는 라이프사이클 메서드를 사용할 수 없다.