[React] 함수형 컴포넌트에서 componentDidUpdate() 구현하기

함수형 컴포넌트는 클래스형 컴포넌트와 다르게 라이프 사이클 메서드가 없습니다.

그렇기 때문에 라이프 사이클 관리를 Hooks을 사용하여 하게 됩니다.

 

저번 포스팅을 통해 useEffect로 mount, unmount, update를 다루는 방법들을 배워봤는데,

deps를 활용해 componentDidMount와 componentDidUpdate를 동시에 다루는 방법은 있지만

componentDidUpdate만을 다루는 방법은 소개하지 않았습니다.

 

2023.06.20 - [개발일기/Web] - [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle)

[React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle)

 

그래서 오늘은 Hooks을 활용하여 라이프 사이클 메서드 componentDidUpdate를 구현하는 방법을 알아보겠습니다.

 

일단 componentDidUpdate()는 update시에만 호출되는 라이프 사이클 메서드입니다.

주로 상태 변경을 감지할 때 사용합니다.

 

함수형 컴포넌트에서 라이프 사이클을 관리할 때 주로 사용하는 useEffect는 첫 렌더링 시 무조건 호출됩니다.

따라서 Mount된 이후  Update에만 실행하기 위해서는 State나 Ref를 활용하여야 하며,

렌더링을 할 필요는 없기에 useRef를 활용하여 구현하게 됩니다.

해당 코드의 useEffect는 컴포넌트의 첫 렌더링 (Mount)와 value가 변경되었을 경우에 호출되게 됩니다.

MountRef의 경우 첫 렌더링 시 false 값을 갖고 있기 때문에 true로 변경되는 로직을 따릅니다.

이후 value가 변경되었을 경우에는 콘솔에 'componentDidUpdate 호출!'을 띄우게 됩니다.

이 부분이 componentDidUpdate()와 같은 기능을 하게 됩니다.

 

이러한 기능이 필요한 부분에 모두 useRef와 useEffect를 활용하여 구현하는 것은 비효율적이기 때문에

아래와 같이 custom Hook으로 구현하는 것이 일반적입니다.