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;
}
Last updated