[React / 라이프 사이클] 생명주기

리액트를 다루는 기술을 보면서 학습하던 중 중요한 부분들은 블로그에 정리 중에 있습니다. 아직 정리가 덜 끝나 간단한 부분 몇개만 공개를 하고 추후(언제 될지는 몰라요...) 포스팅 하도록 하겠습니다. 오늘은 어플리케이션 개발에 많은 혼란을 가져오는 부분 중 하나인 라이프 사이클에 대한 정리 부분을 공개합니다.

라이프 사이클

모든 리액트 컴포넌트에느 라이프사이클이 존재. 컴포넌트의 수명은 페이지에 렌더링되기 전인 '준비 과정'에서 시작하여 페이지에서 사라질 때 '끝'남.

메서드

1. Will 접두사 - 어떤 작업을 작동하기 전에 실행되는 메서드
2. Did 접두사 - 어떤 작업을 작동한 후 실행되는 메서드

컴포넌트의 라이프 사이클

1. 마운트 - 페이지에 컴포넌트가 나타남

• 마운트 과정에서 호출하는 메서드

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

2. 업데이트 - 컴포넌트 정보를 업데이트 (리렌더링)

• 업데이트가 일어나는 경우

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

• 업데이트가 일어나는 경우 호출하는 메서드

  1. 업데이트를 발생시키는 경우가 실행된 경우 (위의 원인)
  2. getDerivedStateFromProps: (마운트 과정 및 업데이트가 시작하기 전 호출) props의 값을 state에 넣을 때 사용하는 메서드
  3. shouldComponentUpdate: 컴포넌트 리렌더링을 결정하는 flag. true 반환 시 라이프 사이클의 다음 메서드 실행 / false 반환 시 작업중지. this.forceUpdate() 함수를 호출하면 이 과정을 생략하고 바로 render 함수 호출
  4. render: 컴포넌트 리렌더링
  5. getSnapshotBeforeUpdate: 업데이트 반영 전 snapshot을 가져오는 메서드
  6. componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

3. 언마운트 - 페이지에서 컴포넌트가 사라짐

• 언마운트 과정에서 호출하는 메서드

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

출처: 리액트를 다루는 기술