[react] 라이프사이클 메서드

라이프사이클 메서드

라이프사이클 메서드의 종류는 총 아홉가지이다.

Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고,

Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.

 

라이프 사이클은 총 세 가지 마운트, 업데이트, 언마운트 카테고리로 나눈다!!

 

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다.

이때 호출하는 메서드는 다음과 같다.

 

컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render ->componentDidMount

• constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
• getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
• render : 우리가 준비한 UI를 렌더링하는 메서드
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트한다.

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

이렇게 컴포넌트를 업데이트할 때는 다음 메서드를 호출한다!!

 

업데이트를 발생시키는 요인 (props 변경/ state 변경/ 부모컴포넌트 리렌더링) -> getDerivedStateFromProps -> shouldComponentUpdate -> true 반환 시 render 호출, false 반환 시 여기서 작업 취소 -> render -> getSnapshotBeforeUpdate -> 웹 브라우저상의 실제 DOM 변화 -> componentDidUpdate

• getDerivedStateFromProps : 이 메서드는 마운트 과정에서도 회출되며, 업데이트가 시작하기 전에도 호출됨. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드. 이 메서드에서는 true/false를 반환해야 하며 true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환히면 작업을 중지한다. 즉, 컴포넌트가 리렌더링되지 않는다. 만약 특정 함수에서 this.forceUpdate()함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출한다.
• render : 컴포넌트를 리렌더링한다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드이다.
• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

언마운트

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것

 

언마운트하기 -> ComponentWillUnmount

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

 

---

참고 자료

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG

「리액트를 다루는 기술 - 김민준」