[Typescript React] 컴포넌트 생명주기

---

클래스형 컴포넌트는 규칙에 맞게 움직입니다.

클래스형 컴포넌트는 정해진 생명주기에 맞게 움직입니다.

생명주기 메소드를 오버라이딩하면,

다음과 같은 일을 할 수 있죠.

• 특정 조건에서 렌더링 하지 않기.
• 업데이트 전에 해야할 일 수행하기.  (데이터 획득 및 ...)
• 컴포넌트가 제거될 때 해야할 일 수행하기. 
• ...

아래는 16.4 버전에서의 생명주기 모형도입니다.

리액트 버전마다 생명주기가 다릅니다.

React 16.4 Life-Cycle

이전 또는 이후의 생명주기가 보고싶다면,

React Lifecycle Method Diagram 홈페이지를 참조해주세요.

---

컴포넌트가 처음 생성될 때 

이 범주에 해당되는 생명주기 메소드는 다음과 같습니다.

• constructor
• componenetDidMount( )

componenetDidMount 메소드는 화면에 처음 컴포넌트가 나타났을 때 동작합니다.

컴포넌트가 DOM에 정착했을 때 동작하기 때문에, DOM이 필요한 초기설정 작업을 여기에 적습니다.

---

렌더링 진행 전

이 범주에 해당되는 생명주기 메소드는 다음과 같습니다.

• shouldComponenetUpdate (nextProps: P, nextState: S) : boolean

shouldComponenetUpdate 메소드는 렌더링이 진행되기 전에,

이 컴포넌트를 진짜 렌더링해야 하야되?에 대한 결과를 반환해야 합니다. (기본값 true)

상위 컴포넌트의 렌더링이 시작되면,

하위 컴포넌트의 렌더링도 전부 진행됩니다.

렌더링이 꽤 만만찮은 비용을 잡아먹는 작업이므로,

조건에 따라 하위 컴포넌트의 렌더링 자체를 막는 메소드입니다.

---

렌더링 시점

이 범주에 해당하는 생명주기 메소드는 다음과 같습니다.

• render( ) : ReactNode

shouldComponenetUpdate가 true를 반환하면 진행됩니다.

이 컴포넌트를 어떻게 표현해야 하는지에 대해 기술하면 됩니다.

---

렌더링 완료 후,  DOM 업데이트 직전

이 범주에 해당하는 생명주기 메소드는 다음과 같습니다.

• getSnapshotBeforeUpdate(prevProps: P, prevState: S) : SS | null
  

DOM에 업데이트가 일어나기 직전에, 현재 DOM 상태를 가져올 수 있습니다.

결과로 그 객체의 SS (= SnapShot) 타입을 반환합니다.

여기서 리턴하는 값은 componenetDidUpcate 에서 3번째 인자로 받을 수 있습니다.

SS 타입은 React.Componenet의 3번째 제네릭이며, 

그 순간을 어떻게 표현할지 정의합니다.

---

DOM 업데이트 완료 후

이 범주에 해당하는 생명주기 메소드는 다음과 같습니다.

• componenetDidUpcate(prevProps: P, prevState: S, snapshot?: SS) : void

업데이트가 완료된 DOM을 얻을 수 있습니다.

getSnapshotBeforeUpdate에서 얻은 스냅샷을 인자로 받을 수 있습니다.

---

컴포넌트가 제거될 때

이 범주에 해당하는 생명주기 메소드는 다음과 같습니다.

• componenetWillUnmount( ) : void

컴포넌트가 DOM에서 제거될 때 호출됩니다.

설정했던 이벤트리스너와 외부 라이브러리 인스턴스를 제거합시다.