[React] 컴포넌트의 라이프사이클

모든 컴포넌트에는 라이프사이클이 존재한다.

 

컴포넌트의 라이프사이클은 페이지에 렌더링되기 전인 준비과정 ~ 페이지가 사라질 때 까지 이다.

 

라이프사이클 메서드 별 접두사

Will : 어떤 작업을 작동하기 전에 실행되는 메서드

 

Did : 어떤 작업을 작동한 후에 실행되는 메서드

 

라이프사이클은 마운트, 업데이터, 언마운트로 나눈다.

 

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트 라고 함.

 

constructor -> getDerivedStateFromProps -> render -> componentDidMount

 

constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

 

getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드

리액트 v16.3 이후에 새로 만든 라이프사이클 메서드

 

render : UI를 렌더링 하는 메서드

 

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

컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행함. 이 안에서 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, ajax요청과 같은 비동기 작업을 처리함  

 

 

컴포넌트가 업데이트 되는 경우

1. props가 바뀔 때

2. state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. this.forceUpdate로 강제로 렌더링을 트리거할 때 

 

 

 

언마운트

 

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

 

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