[리액트] 라이프사이클이란? 클래스 컴포넌트에서 사용하는 라이프사이클 메서드 정리

라이프사이클이란?

정의

라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다.

라이프사이클 다이어그램

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

클래스형 컴포넌트에서 사용하는 라이프사이클 메서드

클래스형 컴포넌트에서 사용하는 라이프사이클 메서드

추가설명

• 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다
• 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다
• 함수형 컴포넌트에서는 Hooks를 사용한다

라이프 사이클 메소드를 언제 사용할까?

• 컴포넌트가 처음 렌더링되었을때 특정작업을 하고싶을때
• 컴포넌트를 업데이트하기 전/후 특정작업을 하고싶을때
• 컴포넌트가 사라질때 특정작업을 하고싶을때
• 불필요한 업데이트를 방지하고 싶을때

즉, 라이프 사이클 메서드는 컴포넌트가 브라우저에

1. 나타날 때 (Mount)
2. 업데이트 될때 (Update)
3. 사라질 때 (Unmount)

이 중간 과정에서 어떤 작업을 하고 싶을 때 사용할 수 있는 메서드다

 

클래스형 컴포넌트에서 라이프 사이클 메서드 종류

1. 마운트 (Mount)

DOM이 생성되고 컴포넌트가 브라우저에 나타나는 것

마운트시 (컴포넌트가 브라우저에 나타날때/ DOM이 생성될때) 호출하는 메서드

1) consturctor

• 컴포넌트 생성자 메서드
• 컴포넌트를 새로 만들때마다 호출된다 (생성된 컴포넌트가 어디선가 불려질때마다 호출된다 <ComponentName /> )
• 이 메서드 안에서 초기 state를 선언 할수 있다
• 클래스가 어떤 오브젝트를 상속하고 있으면 (extends가 있으면), constructor 메서드 안에 반드시 super(props)를 써줘야한다

class Name extends something {
  consturctor(props) {
    super(props)
  }
}

2) getDerivedStateFromProps (중요X)

• props에 있는 값을 state에 넣을 때 사용하는 메서드
• props의 변화에 따라 state 값에도 변화를 주고싶을 때 사용
• 컴포넌트가 마운트될 때와 업데이트가 시작되기 전에 호출된다

3) render

• 준비된 UI를 렌더링하는 메서드
• 라이프사이클 메서드 중 유일하게 필수 메서드다
• this.props, this.state에 접근할 수 있다
• 아무것도 보여주고 싶지 않다면 null값이나 false값을 반환하면 된다

4) componentDidMount

• 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
• 즉 컴포넌트를 만들고 첫 렌더링을 다 마친후 실행되는 메서드
• 비동기 작업을 처리

 

2. 업데이트 (Update)

브라우저에 컴포넌트가 업데이트 되는 것

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

1) props가 바뀔때: 부모 컴포넌트에서 넘겨주는 props가 바뀔때

2) state가 바뀔때: 해당 컴포넌트가 가지고 있는 state가 setState를 통해 업데이트 될때 

3) 부모 컴포넌트가 리렌더링될때: 부모컴포넌트가 리렌더링될때 자식컴포넌트도 리렌더링이된다

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

업데이트시(위의 예시 중 하나라도 충족할때) 호출하는 메서드

1) getDerivedStateFromProps (중요X)

• props에 있는 값을 state에 넣을 때 사용하는 메서드
• props의 변화에 따라 state 값에도 변화를 주고싶을 때 사용
• 컴포넌트가 마운트될 때와 업데이트가 시작되기 전에 호출된다

2) shouldComponentUpdate (중요X)

• props 또는 state를 변경했을 때 컴포넌트가 리렌더링을 해야할지 말아야 할지 결정하는 메서드
• 반드시 true 또는 false 값을 반환
• 컴포넌트를 만들 때 이 메서드를 따로 생성하지 않으면 기본적으로 언제나 true값을 반환
• true 반환 → 다음 라이프사이클 메서드를 실행
• false 반환 → 업데이트 과정 중지 (컴포넌트가 리렌더링되지 않음)
• props와 state는 this.props와 this.state로 접근하고 새로 설정될 props와 state값은 nextProps와 nextState로 접근할 수 있다
• this.forceUpdate() 함수가 호출한다면 shouldComponentUpdate 과정을 생략하고 바로 render 함수를 호출한다

3) render

• 준비된 UI를 렌더링하는 메서드
• 라이프사이클 메서드 중 유일하게 필수 메서드다
• this.props, this.state에 접근할 수 있다
• 아무것도 보여주고 싶지 않다면 null값이나 false값을 반환하면 된다

4) getSnapshotBeforeUpdate (중요X)

• render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출된다
• 즉 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
• componentDidUpdate와 반드시 함께 사용한다
• 주로 업데이트하기 직전의 값을 참고할일이 있을 때 활용한다 i.e.) 스크롤바 위치 유지

5) componentDidUpdate

• 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드
• 즉 컴포넌트 리렌더링을 완료한 후 실행하는 메서드
• 업데이트가 끝난 직후이므로 DOM 관련 처리를 한다
• prevProps, prevState를 사용해 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다

 

3. 언마운트 (Unmount)

컴포넌트를 DOM에서 제거해 컴포넌트가 브라우저에서 사라지는 것

언마운트시(컴포넌트가 브라우저에서 사라질때) 호출하는 메서드

1) componentWillUnmount

• 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
• 즉 컴포넌트를 DOM에서 제거하기전에 실행하는 메서드다
• componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야한다

 

4. 기타

1) componentDidCatch

• 컴포넌트 렌더링 도중에 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 에러 UI를 보여 줄 수 있게 해준다
• 첫번째 파라미터로 error, 두번째 파라미터로 info를 받는다
• error는 어떤 에러가 발생했는지에 대한 정보를 가진 파라미터다
• info는 어디에 있는 코드에서 오류가 발생했는지에 대한 정보를 가진 파라미터다