[React] useEffect 의존성 제거하기

 

[React] useEffect 의존성 제거하기

useEffect 훅은 컴포넌트가 특정 값이 변경될 때 어떤 작업을 수행하도록 설정할 수 있습니다.

하지만 때로는 useEffect가 불필요하게 자주 실행되는 경우가 있습니다.

이럴 때 효과적으로 의존성을 제거하는 방법을 살펴보겠습니다.

 

 

 

1. 함수 밖으로 코드 이동

Effect 내부에서 선언된 함수는 항상 재생성되므로, 의존성 배열에 포함되지 않도록 하려면 함수 외부로 이동시켜야 합니다.

// Before
useEffect(() => {
  function doSomething() {
    console.log('Hello');
  }
  doSomething();
}, [/* dependencies */]);

// After
function doSomething() {
  console.log('Hello');
}

useEffect(() => {
  doSomething();
}, [/* dependencies */]);

 

 

 

2. 객체를 의존성으로 사용하지 않기

객체는 참조형 데이터이기 때문에 매번 새 객체가 생성됩니다.

객체 자체를 의존성 배열에 포함하지 말고, 필요한 속성만 포함시킵니다.

// Before
useEffect(() => {
  console.log(user);
}, [user]);

// After
useEffect(() => {
  console.log(user.id);
}, [user.id]);

 

 

 

3. Effect 이벤트 사용

특정 코드가 비반응적이어야 한다면 useEffectEvent를 사용할 수 있습니다.

이는 의존성을 명확하게 관리할 수 있게 도와줍니다.

import { useEffectEvent } from 'react';

// Effect 이벤트 정의
const onEvent = useEffectEvent(() => {
  console.log('Event happened');
});

// 사용
useEffect(() => {
  onEvent();
}, [/* dependencies */]);

 

 

 

4. 함수 메모이제이션

useCallback을 사용하여 함수를 메모이제이션하면 불필요한 재생성을 방지할 수 있습니다.

import { useCallback } from 'react';

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

useEffect(() => {
  memoizedCallback();
}, [memoizedCallback]);

 

 

 

 

 

5. 최신 값 사용하기

// Before
useEffect(() => {
  const intervalId = setInterval(() => {
    setCount(count + 1); // count는 초기 값만 참조
  }, 1000);
  return () => clearInterval(intervalId);
}, []);

// After
useEffect(() => {
  const intervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1); // 최신 값 참조
  }, 1000);
  return () => clearInterval(intervalId);
}, []);

 

 

 

 

요약

• 함수와 객체의 위치: 함수는 외부로 이동시키고, 객체는 필요한 속성만 의존성 배열에 포함합니다.
• useEffectEvent 사용: 비반응적 코드를 처리할 때 유용합니다.
• useCallback 사용: 함수 메모이제이션으로 불필요한 재생성을 방지합니다.
• 최신 값 참조: 상태 값을 사용할 때는 항상 최신 값을 참조하도록 합니다.