useFirstRender

Introduction

useIsFirstRender 훅을 사용하는 주된 이유는 컴포넌트의 첫 번째 렌더링에만 수행되어야 하는 작업을 효율적으로 처리하기 위해서입니다.

React 컴포넌트의 렌더링 사이클 중에서 첫 번째 렌더링과 이후의 렌더링은 다를 수 있습니다. 예를 들어, 초기 데이터 로딩, 외부 리소스에 대한 요청, 혹은 특정한 설정 등은 주로 컴포넌트가 처음 마운트될 때만 수행되어야 하는 작업입니다.

이런 경우에 useIsFirstRender 훅을 사용하면 조건부 렌더링을 통해 첫 번째 렌더링에만 특정 코드 블록을 실행할 수 있습니다. 이는 불필요한 작업을 줄이고 성능을 향상시킬 수 있습니다.

예를 들어, 네트워크 요청이나 초기화 작업은 첫 번째 렌더링에서만 수행되어야 하므로, 이러한 작업을 조건부로 실행할 수 있어 유용합니다. 또한, 이는 컴포넌트의 로직을 더 깔끔하게 구성할 수 있게 도와줍니다.

Example

import React, { useEffect } from "react";
​
const MyComponent = () => {
  // 커스텀 훅을 사용하여 첫 번째 렌더링인지 여부를 확인합니다.
  const isFirstRender = useIsFirstRender();
​
  // useEffect는 모든 렌더링에서 실행되지만, isFirstRender 플래그를 사용하여
  // 첫 번째 렌더링일 때만 코드를 실행할 수 있습니다.
  useEffect(() => {
    if (isFirstRender) {
      console.log("이 코드는 첫 번째 렌더링에서만 실행됩니다!");
      // 첫 번째 렌더링에만 수행되어야 하는 작업을 여기에 수행하세요.
    } else {
      console.log("이 코드는 두 번째 이후 렌더링에서 실행됩니다!");
      // 두 번째 이후 렌더링에 수행되어야 하는 작업을 여기에 수행하세요.
    }
​
    // 모든 렌더링에서 실행되어야 하는 정리 작업이나 작업을 여기에 수행하세요.
​
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 빈 의존성 배열은 이 useEffect가 마운트와 언마운트 때만 실행되도록 보장합니다.
​
  // 나머지 컴포넌트 로직은 여기에 작성하세요.
​
  return (
    <div>
      {/* 컴포넌트의 JSX 부분 */}
    </div>
  );
};
​
export default MyComponent;

useEffect 훅은 모든 렌더링에서 실행되지만, useIsFirstRender 훅이 반환한 isFirstRender 플래그를 사용하여 첫 번째 렌더링인지 여부에 따라 조건부로 코드를 실행합니다.

Hook

import { useRef } from "react";
​
/**
 * 컴포넌트의 처음 랜더링 여부를 나타내기 위한 커스텀 훅입니다.
 *
 * 1. 첫 마운트시 (isFirstMount.current === true)
 * isFirstMount는 useRef를 통해 생성된 객체로 초깃값이 true
 * 함수가 처음 호출 시 isFirstMount.current가 true 이므로, 조건문이 실행
 * isFirstMount.current를 false로 변경하고 true로 반환
 *
 * 2. 이후 랜더링 때 (isFirstMount.current === false)
 * isFirstMount.current가 이전에 false로 변경이 되었기 때문에, 조건문이 실행되지 않음
 * 즉, isFirstMount.current의 현재값인 false가 반환이됨.
 *
 * 특정 코드 블록을 실행하고 처음 랜더링떄만 부수 작업할 수 있는 효과를 줄 수 있다.
 * @returns {boolean}
 */
export default function useIsFirstRender(): boolean {
  // useRef를 사용하여 컴포넌트가 처음 렌더링되었는지 추적하는 ref 객체를 생성합니다.
  const isFirstMount = useRef(true);
​
  // 첫 번째 마운트시
  if (isFirstMount.current) {
    // isFirstMount를 false로 변경하고, true를 반환합니다.
    isFirstMount.current = false;
    return true;
  }
​
  // 현재 렌더링이 처음이 아니면 false를 반환합니다.
  return isFirstMount.current;
}