useUpdateEffect

Introduction

이 useUpdateEffect 훅은 컴포넌트가 update를 의도할때, 사용하는 것을 목적으로 합니다. 이 훅의 특징으로 다음과 같습니다.

1.첫 번째 마운트에서는 실행되지 않음 : useUpdateEffect를 사용하면 컴포넌트의 첫 번째 마운트 시에는 콜백이 실행되지 않습니다. 이는 종종 초기 렌더링 시 불필요한 부하를 피할 수 있게 도와줍니다.

  1. 의존성 배열 활용 : deps 매개변수를 이용하여 특정 의존성이 변경될 때만 콜백을 실행할 수 있습니다. 이는 특정 상태나 프롭스의 변경에 반응적으로 동작할 때 유용합니다.

Example

import React, { useState } from "react";

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useUpdateEffect(() => {
    console.log("컴포넌트가 업데이트될 때 실행되는 콜백!");
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>Increment Count</button>
    </div>
  );
};

useUpdateEffect를 사용하여 count 상태가 변경될 때만 특정 콜백이 실행되도록 설정되어 있습니다.

Hook

import { useEffect, useRef } from "react";
import type { DependencyList } from "react";

/**
 * 컴포넌트가 처음 마운트될 때가 아닌, 업데이트 시에만 실행되는 사용자 정의 React 훅입니다.
 *
 * @param callback - 컴포넌트 업데이트 시에 실행될 콜백 함수입니다.
 * @param deps - 콜백을 실행할 조건으로 설정된 의존성 배열입니다.
 */
export default function useUpdateEffect(callback: () => void, deps: DependencyList) {
  const ref = useRef<boolean>(false);

  useEffect(() => {
    if (ref.current) {
      callback();
    } else {
      console.log("첫 번째 마운트입니다. 업데이트가 아닙니다.");
      ref.current = true;
    }
  }, [...deps]);
}

이 훅은 React에서 사용되는 사용자 정의 훅인 useUpdateEffect를 정의하고 있습니다. 이 훅은 컴포넌트가 처음 마운트될 때가 아니라, 업데이트될 때에만 특정 콜백 함수를 실행하도록 도와주는 역할을 합니다. 이를 위해 useEffect와 useRef를 활용합니다.

useUpdateEffect 함수는 두 개의 매개변수를 받습니다:

  • callback: 컴포넌트가 업데이트될 때 실행될 콜백 함수입니다.

  • deps: 콜백을 실행할 조건으로 설정된 의존성 배열로, 이 배열에 포함된 값 중 하나라도 변경될 때에만 콜백이 실행됩니다. useEffect 내부에서는 ref를 사용하여 첫 번째 마운트 시에는 콜백을 실행하지 않도록 하고, 이후에는 업데이트 시에만 콜백을 실행하게 합니다.

PrevioususeUnmountNextuseWindowResize

Last updated