React - ClassComponent 라이프 사이클

 

React를 사용할 때는 컴포넌트를 클래스 또는 함수로 정의할 수 있습니다. 클래스 컴포넌트로 정의를 할 경우 각각의 컴포넌트는 컴포넌트의 라이프 사이클 즉, 수명주기가 존재합니다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이 납니다. 

위 이미지는 리액트 클래스형 컴포넌트의 라이프 사이클을 나타냅니다. (v16.4)

1. 라이프 사이클의 분류

(v16.4 기준으로 라이프 사이클에 대해 정리해보겠습니다.)

라이프 사이클은 생성 될 때, 업데이트 할 때, 제거 할 때로 크게 세가지 유형으로 나눌 수 있습니다. (위 사진 참고) 이를 리엑트에서 마운트, 업데이트, 언마운트 라고 합니다.

• 마운트 : 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현
• 업데이트
  1) props가 바뀔 때
  2) state가 바뀔 때
  3) 부모 컴포넌트가 리렌더링 될 때
  4) this.forceUpdate로 강제 렌더링을 할때
• 언마운트 : 컴포넌트가 제가 될 때 unMount라고 표현

   1-1. 마운트

constructor(), render(), componentDidMount() 순으로 생명 주기를 가집니다.

 

• constructor() : 컴포넌트가 처음 만들어질 때 실행되는 생성자입니다.

constructor() 사용 예시

• render() : 클래스형 컴포넌트에선 render를 쓰지 않고 컴포넌트를 렌더링할 수 없습니다.

render() 사용 예시

• componentDidMount() : 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출됩니다. 컴포넌트가 화면에 나타난 상태이므로, DOM의 속성을 읽거나 직접 변경하는 작업을 진행합니다.

componentDidMount() 사용 예시

   1-2. 업데이트

shouldComponentUpdate(), render(), componentDidUpdate() 순으로 생명 주기를 가집니다.

 

• shouldComponentUpdate() : 아직 render하기 전에 호출하며, return false를 하면 render을 취소가 가능하기 때문에 주로 성능 최적화를 합니다.

shouldComponentUpdate() 사용 예시

• render()
• componentDidUpdate() : 리렌더링 완료 후에 호출합니다. 이미 업데이트되었기 때문에 바뀌기 이전의 props, state 정보를 가지고 있습니다.

componentDidUpdate() 사용 예시

   1-3. 언마운트

componentWillUnmount() 하나의 생명주기를 가집니다.

 

• componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출합니다.

componentWillUnmount() 사용 예시

 

 

 

리엑트 클래스형 컴포넌트의 라이프 사이클은 클래스형 컴포넌트로 개발을 할 때 가장 기본적이고 필수적으로 알고 있어야 한다! 특히 마운트, 업데이트 과정은 자주 쓰이므로 더 자세하게 알아두자!

(나중에 함수형 컴포넌트의 생명주기도 정리해보자!)