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
를 사용하였다.
Author And Source
이 문제에 관하여(React - useDidMount custom hook), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pest95/React-useDidMount-custom-hook저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)