본문 바로가기

# Tech/React

[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에서 제거될 때 호출됩니다.

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