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
반응형
'react.js' 카테고리의 다른 글
[React] 혹시 리액트 렌더링 과정을 아시나요? (0) | 2024.07.12 |
---|---|
[React] useEffectEvent hook (0) | 2024.06.10 |
[React] useSyncExternalStore (외부 데이터 구독 새로운 방법) (0) | 2024.06.09 |
[React] Props 변경 시 상태 초기화하기 (not UseEffect, but Key) (0) | 2024.06.09 |
[React] react에서의 Side Effect (0) | 2024.06.09 |
댓글