React - useDidMount custom hook

useDidMount hook 생성하기

React의 class형 컴포넌트에서는 componentDidMount라는 메서드가 존재한다.

리액트 16.8버전 이후 hook이 도입되었지만 componentDidMount와 그나마 유사한 hook은 useEffect가 유일하다.

내 생각으로는 hook을 도입한 이후 custom hook을 이용한 기능들의 구현이 가능해졌기 때문에 그 필요성을 느끼지 못해 새로운 hook을 만들지는 않은 것으로 추정한다.

그럼 직접한번 구현해보자.

useDidMount 만들기

리액트의 componentDidMount에 대한 설명은 다음같이 되어있다.

componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어 지면 됩니다.

초기 렌더링인지를 boolean값으로 알려주면 if문의 조건으로 넣어서 true일때만 코드 블록을 실행 시키면 componentDidMount와 똑같인 동작을 할 수 있을 것이다.

useDidMount

import { useRef, useEffect } from 'react';

const useDidMount = () => {
    const didMountRef = useRef(false);

    useEffect(() => {
        didMountRef.current = true;
    }, []);

    return didMountRef.current;
};

export default useDidMount;

초기 렌더링시 useEffect가 실행되면서 useDidMount는 true값을 리턴한다.

useState 대신 useRef를 사용한 이유

그 이유는 useState로 useRef를 대체한 후 console.log를 하나 찍어보면 바로 이해할 수 있다.

useState는 DOM을 업데이트 하기 떄문에 console.log가 두 번찍힐 것이다.
이는 불필요한 상황이므로 useRef를 사용하였다.