React useEffect 의존성 배열 때문에 고생하다가 알게 된 핵심 포인트

React로 작업하면서 useEffect 훅의 의존성 배열 때문에 한참 삽질을 했어요. 의존성 배열을 어떻게 넣어야 하는지, 안 넣으면 어떤 문제가 생기는지 직접 경험해보니 왜 중요한지 확실히 알게 되더라고요.

이번 글에서는 제가 겪은 useEffect 의존성 배열과 관련한 문제들, 해결 과정, 그리고 실전에서 꼭 기억하면 좋은 팁들을 모두 정리해봤어요. 이 글 하나만 읽으면 useEffect 의존성 배열에 관한 헷갈림이 싹 풀릴 거예요.

useEffect 의존성 배열, 사실 이게 뭔지부터

처음엔 의존성 배열이 왜 필요한지 감이 잘 안 왔어요. 간단히 말하면, useEffect 안의 코드가 언제 실행될지 React에 알려주는 역할이거든요. 빈 배열 []을 넣으면 컴포넌트가 처음 마운트될 때 한 번만 실행되고, 특정 값을 넣으면 그 값이 바뀔 때마다 실행돼요.

저는 이렇게 썼다가 크게 고생했어요

한번은 상태값을 의존성 배열에 안 넣었는데, 그 상태가 바뀌어도 useEffect가 실행되지 않더라고요. 반대로 너무 많은 변수를 넣었다가 무한 루프에 빠지기도 했고요.

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

useEffect(() => {
  console.log('Effect 실행', count);
  // count를 의존성 배열에 안 넣었더니 count가 바뀌어도 여기 안 찍힘
}, []);

위처럼 빈 배열만 넣으면 상태 변화가 있어도 useEffect가 다시 실행 안 되니 원하는 동작이 안 나오는 거죠.

이렇게 하니 문제가 해결됐어요

그때부터 상태나 props 중에 useEffect 내에서 사용하는 변수는 100% 의존성 배열에 넣으려고 바꿨어요. 이렇게 하니까 값이 바뀔 때마다 정확히 원하는 타이밍에 effect가 실행되더라고요.

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

useEffect(() => {
  console.log('Effect 실행', count);
}, [count]); // count를 꼭 넣음

이렇게만 해도 무한 루프 문제는 거의 안 생겨요. 그런데 여기서 자주 헷갈리는 점이 있어요.

여기서 많이들 헷갈려하는 게 있어요

예를 들어, 함수가 의존성 배열에 들어갈지 말지 고민되는 경우가 있죠. 함수는 내부에서 새로 만들어질 때마다 참조가 바뀌기 때문에 그냥 넣으면 무한 루프가 돼요. 이럴 땐 useCallback으로 함수 메모이제이션을 하는 걸 추천해요.

const memoizedFunc = useCallback(() => {
  console.log('함수 로직');
}, []);

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

이렇게 하면 함수 참조가 고정돼서 useEffect가 불필요하게 계속 실행되는 걸 막을 수 있어요.

의존성 배열에서 꼭 기억할 포인트

• useEffect 내부에서 사용하는 모든 상태(state)와 props는 의존성 배열에 넣어야 해요.
• 함수는 필요하면 useCallback으로 감싸서 메모이제이션하세요.
• 의존성 배열에 넣을지 애매한 값은 ESLint가 알려주니 꼭 확인해보세요.
• 넘버, 문자열 같은 원시값은 변경감지가 쉬우니 안심하고 넣으셔도 돼요.
• 너무 복잡하게 생각하지 말고, 일단 ESLint 경고대로 하면서 문제 생기면 조정하세요.

자주 받는 질문들

Q. 의존성 배열에 무조건 다 넣으면 무한 루프가 생기지 않나요?

A. 보통 함수나 객체처럼 참조가 매번 바뀌는 값이 문제인데, 이런 경우는 useCallback이나 useMemo로 메모이제이션 처리해야 무한 루프를 막을 수 있어요.

Q. ESLint가 알려주는 의존성 배열 경고를 무시해도 되나요?

A. 가급적 무시하지 마세요. React 공식 가이드가 의존성 배열 관리에서 실수를 줄이려고 ESLint 규칙을 권장하거든요. 경고를 참고하면서 문제점을 하나씩 해결하는 게 좋아요.

이번 경험 덕분에 이제는 useEffect 쓸 때 의존성 배열을 꼼꼼히 체크하는 습관이 생겼어요. 앞으로는 이 부분 때문에 고민하는 일이 훨씬 줄 것 같아요. React 훅을 더 깊게 이해하는 계기가 되었던 만큼, 여러분도 꼭 의존성 배열 신경 써서 깔끔한 컴포넌트를 만들어 보세요!