1. 라이프사이클 ✏

• 라이플 사이클(수명 주기)은 모든 리액트 컴포넌트에 존재한다.
• 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
• 컴포넌트의 라이플 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.
  * 함수형 컴포넌트는 Hooks 기능으로 구현해야함.

1.1 라이프사이클 메서드 이론

• 라이플사이클 메서드의 종류는 총 아홉 가지이다.
  • will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이다.
  • did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.
• 위의 메서드들은 컴포넌트 클래스에서 덮어 써 선언하여 사용한다.

1.2 마운트, 업데이트, 언마운트

• 라이프사이클의 종류는 아홉 가지라고 했는데 카테고리는 총 세 가지로 나눌 수 있다.
  👉 마운트, 업데이트, 언마운트

1.2.1 마운트

• DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다.
• 이때 호출되는 메서드는 다음과 같다.
  1. 컴포넌트 생성
  2. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다.
  3. getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드이다.
  4. render: 생성한 UI를 렌더링하는 메서드이다.
  5. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드이다.

1.2.2 업데이트

• 컴포넌트는 다음과 같은 네 가지 경우에 업데이트한다.
  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
  4. this.forceUpdate로 강제로 렌더링을 트리거할 때
• 위의 네 가지 상황에서 컴포넌트를 업데이트할 때는 다음과 같이 메서드를 호출한다.
  1. 업데이트를 발생시키는 요인
  2. getDerivedStateFromProps: 마운트 과정에서도 호출되는 메서드이며, 업데이트 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을때 사용.
  3. shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드이다.
     * 결과값은 tru와, false를 반환한다.
     true 반환 시 render 호출, false 반환 시 여기서 작업 취소
     Tip ❗❗
     this.forceUpdate() 함수를 호출하면 이 과정을 생략하고 render 함수를 호출한다.
  4. render: 컴포넌트를 리렌더링한다.
  5. getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드이다.
  6. ComponentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드이다.

1.2.3 언마운트

• 마운트의 반대 과정이라고 생각하자.
  즉, 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.
• 이때 호출되는 메서드는 다음과 같다.
  1. componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출되는 메서드이다.

TIP ❗❗

• 쉽게 말해 컴포넌트의 라이프사이클 메서드 흐름은 아래 그림과 같다.
  

👉 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드라고 기억하자❗❗

end