[React] useEffect 의존성 제거하기

728x90
반응형

 

[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 사용: 함수 메모이제이션으로 불필요한 재생성을 방지합니다.
  • 최신 값 참조: 상태 값을 사용할 때는 항상 최신 값을 참조하도록 합니다.
728x90
반응형

댓글