[React] 생명주기(Life Cycle)

코드잇 스프린트 4기

8주 차 위클리 페이퍼

 

 

생명주기란?

컴포넌트에서 특정 시점(컴포넌트 생성, 변경, 제거)에 이벤트를 호출하는 것이다.

클래스형 컴포넌트와 함수형 컴포넌트는 라이프 사이클을 관리하는 방법이 다르다.

 

클래스형 컴포넌트

생성할 때(Mounting), 변경할 때(Updating), 제거할 때(Unmounting)의 메소드를 제공한다.

 

생성할 때

· constructor: 컴포넌트가 호출되어 렌더링되기 이전에 가장 먼저 호출되는 함수.

· getDerivedStateFromProps: props로 받아온 것을 state에 설정.

· render: 컴포넌트를 렌더링하는 함수.

· componentDidMount: 첫 렌더링 이후에 마운트(DOM에 추가)되면 발생하는 함수.

 

변경할 때

· getDerivedStateFromProps: 컴포넌트의 props나 state가 변경되었을 때도 호출.

· shouldComponentUpdate: 컴포넌트의 리렌더링 여부를 결정하는 함수.

· render: 컴포넌트를 렌더링하는 함수.

· getSnapshotBeforeUpdate: 컴포넌트의 변화가 일어나기 직전의 DOM에 있는 정보를 가져오고, componentDidUpdate에 인자로 전달된다.

· componentDidUpdate: 리렌더링 작업을 완료 후에 호출되는 함수. 세 번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회할 수 있다.

 

제거할 때

· componentWillUnmount: 컴포넌트가 DOM에서 제거되기 직전에 호출되는 함수. setTimeout, setInterval 등의 타이머를 해제할 때 사용한다.

 

함수형 컴포넌트

생명주기 메소드는 따로 없다. 하지만 훅(hook)으로 생명주기에 관여할 수 있다.

 

생성할 때

· 컴포넌트 내부가 실행된다. useRef, useState를 활용해 첫 생성에만 동작하는 hook을 만들 수 있다. ↔ constructor

· useState에 props로 initialValue를 넣는다. ↔ getDerivedStateFromProps

· return: 컴포넌트를 렌더링하는 함수. ↔ render

· useEffect의 셋업 함수를 지정.  ↔ componentDidMount

 

변경할 때

· React.memo ↔ shouldComponentUpdate

· useEffect의 dependencies 지정. ↔ getSnapshotBeforeUpdate, componentDidUpdate

 

제거할 때

· useEffect의 클린업 함수 ↔ componentWillUnmount

 

 

 

감사합니다.