Life Cycle Method (라이프 사이클 메소드)

  [ 컴포넌트의 수명 ]  

페이지에 렌더링 되기 전인 준비 과정 ~ 페이지에서 사라질 때까지

 

  [ 라이프 사이클 메소드 (LifeCycle Method) ]  

: 한국어도 “생명 주기 메소드”라고 부릅니다.

 

  [ 언제 사용하나요? ]  

 

컴포넌트를 처음으로 렌더링 할 때(또는 컴포넌트를 업데이트 하기 전 후) 특정 작업을 처리하는 경우, 불필요한 업데이트를 방지 해야 하는 경우, 클래형 컴포넌트에서만 사용 가능합니다. React Hooks를 활용하면 함수형 컴포넌트에서 비슷한 작업을 처리 할 수 있습니다. (물론 작동 방식은 많이 다릅니다. 커버 하지 않는 기능들도 있습니다.)

 

(생명 주기 메소드는 컴포넌트가 브라우저 상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메소드들입니다. 에러가 났을 때 호출되는 메소드도 있습니다.)

 

  [ 라이프 사이클 메서드의 종류 ]  
: 총 9가지가 있습니다.

• Will 접두사가 붙은 메소드 : 특정 작업을 작동하기 전에 실행되는 메소드
• Did 접두사가 붙은 메소드 : 특정 작업을 작동한 후 실행되는 메소드

1) 마운트 (Mount)

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

 

마운트 할 때는 다음의 메소드들이 차례대로 호출 됩니다.

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

2) 업데이트 (Update)
: 컴포넌트는 다음의 경우에 업데이트를 합니다.

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

1, 2, 3이 발생하면 다음과 같은 순서로 메서드가 호출된다.

1. props 변경, state 변경, 부모 컴포넌트 리렌더링
2. getDerivedStateFromProps : 마운트에서도 호출되는 메서드. props의 변화에 따라 state에도 변화를 주고 싶을 때 사용한다.
3. shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정한다. true, false 값을 반환해야 하며, false를 반환하면 작업을 중지하고, 컴포넌트가 리렌더링 되지 않는다.
4. render: 컴포넌트를 리렌더링한다. 
   this.forceUpdate 함수를 호출하면 앞의 과정을 생략하고 바로 render 함수를 호출한다.
5. getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출한다.
6. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출한다.

3) 언마운트 (UnMount)
: 컴포넌트를 DOM에서 제거 할 때

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

위 메소드들은 클래스형 컴포넌트 일 때의 라이프 사이클 과정이고,

 

함수형 컴포넌트 일 때 라이프 사이클 과정에서는 React Hooks의 useEffect()를 사용한다.

 

전에 정리한 내용 참고!

[React] useEffect

---

컴포넌트 라이프사이클 메서드