React 클래스형 컴포넌트 생명주기 - Lifecycle

<리엑트 로고>

👉 React 클래스형 컴포넌트 생명주기

Angular, Vue, React 컴포넌트에는 프로세스가 진행되는 시점에 따라 Lifecycle 이벤트로 불리는 특별한 함수가 실행됩니다. 리엑트 생명주기에 따라 아래와 같은 시점과 같이 필요할 때 사용할 수 있다.

	Mounting(생성)	Updating(업데이트)	Unmounting(제거)
설명	페이지에 컴포넌트를 나타내는 이벤트	컴포넌트 정보를 업데이트 하는 이벤트	페이지에서 컴포넌트가 사라지는 이벤트
실행 시점	컴포넌트 클래스의 인스턴스를 DOM 노드에 추가하는 시점	속성 또는 상태가 변경되어 컴포넌트 클래스의 인스턴스를 갱신하는 시점	컴포넌트 클래스의 인스턴스를 DOM에서 제거하는 시점
실행 횟수	1회 실행	변경에 따른 여러번 실행	1회 실행

위의 내용과 같이 React의 Lifecycle 이벤트는 크게 Mounting(생성), Updating(업데이트), Unmounting(제거) 로 나뉜다. 현재버전(v17.0.2) 기준으로 아래 그림과 같이 라이프사이클 함수가 실행된다.

<리엑트 라이프사이클 실행 시점>

들어가기 전 TIP 🖐

생명주기 메소드에서 Did, Will이 포함된 메소드 이름(componentDidMount(), componentDidUpdate(), componentWillUnmount())들을 볼 수 있는데 아래와 같이 이해하면 편합니다.

Did - 해당 시점이 끝난 후 메소드 내용을 실행
Will - 해당 시점 직전에 내용을 실행
 

constructor()

const MyComponent extends React.Component {
  constructor(props) {
    super(props) 
    this.state = {
       count: 0
    }  
    this.handleClick = this.handleClick.bind(this) 
  }   
}

해당 컨포넌트가 마운트 되기 전에 호출되며 부수 효과를 발생시키거나 구독 작업을 수행하지 않는다. 목적은 아래와 같습니다.

- this.state에 객체를 할당하여 지역 state 초기화
- 인스턴스에 이벤트 처리를 위한 메서드 바인딩

위 목적이 필요 없을 시 생성자를 구현하지 않아도 된다.

 

componentDidMount()

컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다.

- DOM 노드가 있어야 하는 초기화 작업 진행
- 외부 라이브러리, 비동기, 네트워크 요청 등을 진행
- 데이터 구독을 설정하기 적합한 위치로, 만약 데이터 구독을 설정 했을 시 꼭 componentWillUnmount() 에서 구독 해제 작업을 진행

 

ComponentDidUpdate()

갱신(리렌더링)이 일어난 직후에 호출됩니다. 

- 모든 DOM이 완성된 상태이기 때문에 추가적인 DOM 조작이 필요 시 사용 및 이전과 현재의 props를 비교하여 네트워크 요청을 보내기 적합
- setState()를 즉시 호출할 수 있지만 조건문으로 감싸지 않으면 무한 반복이 될 수 있음

 

ComponentWillUnmount()

컨포넌트가 마운트 해제되어 삭제 직전에 호출된다

- 구독 해제, 네트워크 요청 취소 등 페이지에 필요한 모든 정리 작업 진행

 

ShouldComponentUpdate()

매 State 변화마다 다시 렌더링을 수행하는 것이며, 현재 State 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미친다. 기본 값은 True 이며, 성능 최적화만을 위한 메소드이므로 주의하여 사용한다.

- 메소드의 기본 값은 True이며, False 반환 시 componentWillUpdate(), rander(), componentDidUpdate() 는 호출하지 않습니다.

 

getDerivedStateFromProps()

최초 마운트 시와 갱신 시 모두에서 render() 메서드를 호출하기 직전에 호출된다.

- Props 변화 시 state 재설정이 필요할 때
- 부수 효과(애니메이션, 데이터 가져오기)를 발생해야할 때 사용
- 자식이 아닌 부모 컴포넌트가 렌더링을 발생했을 때만 실행(렌더링 시 매번 실행되는거에 주의)

 

getSnapshotBeforeUpdate()

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다.

- 컴포넌트가 DOM으로부터 스크롤 위치 등 변경되기 전에 얻을 수 있으며, 반환 값은 componentDidUpdate()에 snapshot 인자로 snapshot 값 또는 null 값이 전달된다.

 

오늘은 리엑트 클래스형 컴포넌트 Lifecycle에 대해서 알아보았다.

긴글 읽어주셔서 감사합니다.
모두 해피 코딩하세요~