React useEffect 의존성 배열 때문에 겪은 삽질과 해결 과정 이야기

React에서 useEffect 훅을 쓰다 보니 의존성 배열 때문에 생각보다 많이 헤맸어요. 이걸 제대로 이해하지 못하면 의도와 다르게 렌더링이 반복되거나, 업데이트가 안 되는 경우도 많더라고요.

이 글에서는 제가 직접 겪은 삽질 사례를 바탕으로 useEffect 의존성 배열이 왜 중요한지, 어떻게 써야 하는지 차근차근 설명해 볼게요. 끝까지 보면 useEffect를 쓸 때 어떤 점을 꼭 주의해야 하는지 한눈에 들어올 거예요.

React useEffect 의존성 배열 왜 중요한지 삽질 후기 관련 정보

처음에는 이게 그냥 선택사항인 줄 알았어요

사실 useEffect는 리액트 컴포넌트 라이프사이클에 맞춰 어떤 작업을 실행하고 싶을 때 쓰는데요, 의존성 배열에 변수를 넣어서 "언제" 이펙트가 실행될지 결정합니다. 그런데 저는 처음에 의존성 배열을 빈 배열([])로 두고 그냥 넘어갔거든요. "아 한 번만 실행되면 되니까 그냥 빈 배열 넣으면 되겠지" 하고요.

그런데 여기서 가장 헷갈렸던 점

한 예로 API 데이터를 받아와서 상태를 set하는 코드가 있었어요. 아래처럼요:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUserData(data));
  }, []);  // 문제는 여기에 userId가 빠져있음

  if (!userData) return <div>Loading...</div>;

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.email}</p>
    </div>
  );
}

이 상태에서 userId가 바뀌어도 useEffect가 다시 실행되지 않아서 사용자 정보가 갱신되지 않았어요. 왜냐하면 의존성 배열이 빈 배열이라 처음 렌더링 때만 실행됐거든요.

이젠 이렇게 하면 됩니다

useEffect의 두 번째 인자로 꼭 의존성 배열을 넣고, 그 안에 이펙트 실행과 관련된 모든 변수를 넣어야 해요. 이렇게요:

useEffect(() => {
  fetch(`https://api.example.com/users/${userId}`)
    .then(res => res.json())
    .then(data => setUserData(data));
}, [userId]);  // userId가 바뀔 때마다 실행

이러니 userId가 바뀔 때마다 새로 fetch를 하게 되고 UI도 자연스럽게 갱신되더라고요.

React useEffect 의존성 배열 왜 중요한지 삽질 후기 관련 정보

여기서 삽질했던 부분들

한 번은 useEffect 안에서 상태를 업데이트하는 함수를 의존성 배열에 넣다가 무한 루프가 발생했어요. 예를 들면 아래처럼요:

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

useEffect(() => {
  setCount(prev => prev + 1);
}, [count]);  // count가 바뀔 때마다 setCount가 실행돼 무한 루프

이걸 보고 "의존성 배열에 상태 setter나 상태 변수 아무거나 넣으면 안 되나?" 싶었는데, 사실 핵심은 setCount 같은 setter 함수는 절대 의존성 배열에 넣지 않고, 상태 변수도 이렇게 직접 업데이트하는 로직에선 주의해야 한다는 거였어요.

이럴 때는 이렇게 해봤어요

이런 무한 루프 문제를 피하려면 다음 방법 중 하나를 쓰면 됩니다.

• 상태 변수를 의존성 배열에 넣지 말고, 필요한 경우 조건문으로 업데이트 제한하기
• useRef를 써서 업데이트 여부를 관리하기
• 상태 업데이트 로직을 useCallback으로 메모이제이션해서 의존성 관리하기

저는 보통 조건문으로 상태 변화가 필요할 때만 set 함수를 호출해서 불필요한 렌더링을 막는 방식을 택하고 있어요.

자주 물어보시는 것들

Q. 의존성 배열에 함수를 넣어야 할 때는 어떻게 해야 하나요?

A. 함수가 컴포넌트 내부에서 선언된 것이라면 매 렌더링마다 새로 생성되기 때문에 의존성 배열에 넣으면 무한 루프가 생길 수 있어요. 이럴 땐 useCallback을 써서 함수를 메모이제이션해서 의존성 배열에 넣으면 효과적입니다.

Q. 의존성 배열에 state나 props를 빠뜨리면 문제가 어떤 식으로 나타나나요?

A. 의존성 배열이 불완전하면 해당 값이 바뀌어도 useEffect가 실행되지 않아 데이터가 최신화되지 않아요. 결국 UI가 실제 상태를 제대로 반영하지 못하게 됩니다. 그래서 React ESLint 플러그인도 의존성 배열 완성을 권장하죠.

React useEffect 의존성 배열 왜 중요한지 삽질 후기 관련 정보

정리하자면 useEffect 의존성 배열은 React 앱에서 상태와 부수효과를 제대로 관리하는 데 꼭 필요한 요소예요. 개발하면서 꼭 필요한 값들을 빼먹지 않고 넣으면서 동시에 무한루프 같은 문제는 의존성 관리와 메모이제이션을 활용해 피할 수 있어요. 이런 부분 잘 챙기면 앱 성능과 버그 관리에 큰 도움이 됩니다.