[React] 생명주기함수(라이프사이클,Life cycle)

리액트에서 가장 핵심이라고 볼 수 있는 컴포넌트는 생명 주기(=라이프사이클=Life cycle)를 가집니다.

컴포넌트는

1. 생성 (mount)
2. 업데이트 (update)
3. 제거 (unmount)

라는 과정을 거치는데 각각의 과정마다 특정한 함수(메서드)를 실행하며 이 함수들을 생명주기함수(생명주기 메서드)라고 합니다.

내용에 들어가기에 앞서 생명주기함수는 클래스컴포넌트에서 적용이 가능하고 함수 컴포넌트에서의 생명주기는 훅(hooks)를 이용해 적용이 가능하다.

이번 포스팅에서는 class컴포넌트에서의 생명주기에 대해 알아보겠습니다.

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

생명주기 함수는 총 9종의 함수가 있으며 위 이미지에서 보는데로 생명주기 함수가 호출됩니다.

그럼 각 단계별로 어떤 함수들이 호출되는지 알아봅시다.

1.생성 (mount)

: 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다

• constructor()
• getDerivedStateFromProps()
• render()
• componentDidMount()
• constructor()
  : 해당 함수는 '맨 처음 생성될 때 한 번만 호출'되며 . this.state에 객체를 할당하여 지역 state를 초기화
  . 인스턴스에 이벤트 처리 메서드를 바인딩 하는데 사용됩니다. 따로 상태를 초기화하거나 메서드를 바인딩하는 작업이 없다면 생성자를 구현하지 않아도 됩니다.
  constructor()함수를 정의할 떄는 super()함수를 가장 위에 호출해야 합니다.
  super()함수는 프로퍼티와 생명 주기 상태 등을 초기화합니다.
  또 constructor()내부에서만 this.state를 직접 할당할 수 있으며 그 외의 메서드에서는 this.setState()를 사용해야합니다.

• static getDerivedStateFromProps()
  : 최초 마운트 시,업데이트 시 모두에서 render()를 호출하기 직전에 호출되는 함수입니다.
  이 함수는 정적함수이기 떄문에 this.props나 this.state 같은 방법으로 props,state에 접근할 수 없습니다. 접근하기 위해서는 인자로 전달받은 props,state를 이용해야 하며, 여기서의 props는 상위컴포넌트에서 전달된 값, state는 현재 컴포넌트의 state값입니다.
  따라서 상위컴포넌트에서 전달받은 프로퍼티로 state값을 연동할 때 주로 사용되며, 반환값으로 state를 변경합니다.

• render()
  class컴포넌트에서 반드시 구현돼야하는 유일한 메서드로 새 화면을 그릴 떄 자동으로 호출되는 함수 입니다.
  render()함수가 반환하는 JSX를 화면에 나타내줍니다.

• componentDidMount()
  render()함수가 JSX를 화면에 나타낸 후 호출되는 함수로 컴포넌트가 화면에 모두 표현된 이후 필요한 작업들은 이 메서드에서 진행합니다.

  2.업데이트 (update)

  : props나 state가 변경되면 렌더(업데이트)가 진행되며 아래 순서대로 호출된다.

• getDerivedStateFromProps()

• shouldComponentUpdate()

• render()

• getSnapshotBeforeUpdate()

• componentDidUpdate()

  (생성단계에서 설명한 함수와 중복되는 함수에 대한 설명은 생략하겠습니다.)

• shouldComponentUpdate()
  : 프로퍼티를 변경하거나 setState()함수를 호출하여 state값을 변경하면 '화면을 새로 출력해야 하는지' 판단하는 함수입니다
  이 메서드는 화면을 출력할지 말지 판단해 데이터 변화를 비교하는 작업을 포함하므로 리액트 성능에 영향을 줍니다.
  화면 변경을 위한 검증 작업을 해야 하는 경우 이 함수를 사용하면 됩니다.

• getSnapshotBeforeUpdate()
  : 컴포넌트에서 업데이트 된 내용이 가상 화면에 출력된 이후에 호출되는 함수입니다. 가상 화면에 출력했기 때문에 화면에 실제로 출력되기 전에 호출되는 함수이며, 출력될 요소(element)의 크기나 스크롤 위치 등의 DOM 정보에 접근할 때 사용됩니다.

• componentDidUpdate()
  : 컴포넌트가 실제 화면에 출력된 후에 호출되는 함수입니다.
  이 함수는 부모 컴포넌트에서 전달된 이전 props와 이전 state값, getSnapshotBeforeUpdate()함수에서 반환된 값을 인자로 전달받아 이 인자들을 이용해 스크롤 위치 변경, 커서 이동 등의 DOM 정보 변경 시 사용됩니다.

  3.소멸 (unmount)

  : 컴포넌트가 DOM에서 제거될 떄 호출된다.

• componentWillUnmount()
  : 컴포넌트가 소멸되지 직전 이 함수가 호출되며 타이머 제거, componentDidMount()에서 생성된 작업 등을 정리 할 때 사용됩니다.
  이 메소드를 사용하여 해제 작업을 하지 않으면 메모리 누수 현상이 발생할 수 있습니다.