• 목록
• 게시판 리스트 옵션
  • 검색

고수일수록 빠지는 useEffect의 함정

의존성 배열이 말 안 듣는 이유

useEffect는 리액트에서 제일 많이 쓰이는 훅 중 하나지만,
고수들도 자주 실수하는 포인트가 있다. 바로 의존성 배열.

흔한 실수: "왜 이게 두 번 실행되지?"

useEffect(() => {
  fetchData();
}, [options]);

문제는 options가 객체일 때 매 렌더마다 항상 새로 만들어진 객체로 간주된다.

const options = { limit: 10 }; // 매 렌더마다 새로 만들어짐

이런 식이면 fetchData()는 컴포넌트가 리렌더링될 때마다 다시 실행됨.

✅ 해결: useMemo로 안정적인 참조 유지하기

const options = useMemo(() => ({ limit: 10 }), []);

이렇게 하면 options 객체는 첫 렌더 이후엔 바뀌지 않기 때문에,
useEffect가 불필요하게 실행되지 않는다.

또는 진짜 필요한 값만 추출해서 의존성으로 사용하기

useEffect(() => {
  fetchData();
}, [limit]);

객체 전체 말고, 내부 값만 의존성으로 넣자. 훨씬 안전하고 깔끔함.

✅ 핵심 요약

• useEffect의 의존성 배열은 참조 변경에 민감하다

• 객체/배열은 매번 새로 만들어지면 실행 트리거됨

• useMemo, useCallback으로 참조 고정하거나, 원시값만 의존성에 넣자