LifeCycle 를 간단하게 알아보자.

컴포넌트의 생명주기

모든 리액트 컴포넌트에는 수명 주기가 존재함.

컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작, 페이지에서 사라질 때 끝남.

 

Mount

DOM이 생성되고 웹 브라우저상에 나타나는 것

componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

Update

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. this.forceUpdate로 강제로 렌더링 트리거할 때

componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

Unmount

컴포넌트를 DOM에서 제거하는 것

componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

 

 

 

 

LifeCycle Method

render

컴포넌트 모양새 정의.

componentDidMount

컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행.

이 안에서 다른 자바스크립트 라이브러리, 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리.

 

componentDidUpdate

리렌더링을 완료한 후 실행.

업데이트가 끝난 직후이므로, DOM 관련 처리를 해도 무방.

 

componentWillUnmount

컴포넌트를 DOM에서 제거할 때 실행.

componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야함.