[React] 리액트의 올바른 useEffect 사용팁

리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다.

 

 

경쟁 상태(Race Condition) ⭐

---

경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다.

 

아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이 과정에서 경쟁 상태가 발생할 수 있다(코드펜 링크).

function RaceConditionExample() {
  const [counter, setCounter] = useState(0);
  const [response, setResponse] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const request = async (requestId) => {
      setIsLoading(true);
      await sleep(Math.random() * 3000);
      setResponse(requestId);
      setIsLoading(false);
    };
    request(counter);
  }, [counter]);

  const handleClick = () => {
    setCounter((prev) => ++prev);
  };

  return (
    <>
      <h3>Current Value: {counter}</h3>
      <h3>Settled Response: {response}</h3>
      <button onClick={handleClick}>Increment</button>
      {/* ... */}
    </>
  );
}

 

1. 첫 번째 클릭: counter + 1, requestId 1 요청 시작
2. 두 번째 클릭: counter + 1, requestId 2 요청 시작
3. 만약 두 번째 요청이 더 빨리 완료되면 response 상태는 2로 업데이트
4. 이후 첫 번째 요청이 완료되면서 response 상태를 1로 덮어씀

 

 

이처럼 response 상태는 가장 최신 요청의 결과를 반영해야 하지만, 비동기 요청의 완료 순서가 랜덤 하기 때문에 의도치 않은 결과가 발생하고 있다.

 

이러한 경쟁 상태는 클린업 함수를 사용해서 처리할 수 있다. 클린업 함수는 다음 이펙트 함수가 실행되기 전에 호출되며, 이전 이펙트 함수의 스코프에서 동작한다.

useEffect(() => {
  let ignore = false; // 현재 useEffect 함수의 스코프
  const request = async (requestId) => {
    setIsLoading(true);
    await sleep(Math.random() * 3000);
    if (!ignore) {
      setResponse(requestId);
      setIsLoading(false);
    }
  };
  request(counter);

  return () => {
    ignore = true; // 이전 useEffect 함수의 스코프
  };
}, [counter]);

 

1. 첫 번째 클릭: counter + 1, requestId 1 요청 시작, ignore = false로 초기화
2. 두 번째 클릭: counter + 1, requestId 2 요청 시작
   • 첫 번째 클릭에서 실행된 useEffect 클린업 함수 호출 → ignore = true로 변경 (이전 요청 무효화)
   • 두 번째 클릭에서 실행된 useEffect 함수 호출 → ignore = false로 초기화
3. 두 번째 요청 완료: 두 번째 useEffect의 ignore 변수가 false 이므로 response 상태 2로 업데이트
4. 첫 번째 요청 완료: 첫 번째 useEffect의 ignore 변수가 true 이므로 response 상태 변경 안 함

 

 

불필요한 렌더링

---

아래 코드는 useEffect 사용으로 불필요한 렌더링이 한 번 더 발생한다.

function Parent() {
  const [someState, setSomeState] = useState();
  return <Child onChange={(v) => setSomeState(v)} />;
}

function Child({ onChange }) {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    onChange(isOn); // 추가 렌더링 유발
  }, [isOn, onChange]);

  function handleClick() {
    setIsOn(!isOn);
  }

  return <button onClick={handleClick}>Toggle</button>;
}

 

1. 클릭 이벤트 발생 → Child 컴포넌트의 로컬 상태(isOn) 업데이트
2. useEffect 실행 → Parent 컴포넌트에서 전달받은 핸들러(onChange) 실행
3. Parent 컴포넌트 상태 업데이트 → 리렌더링
4. Child 컴포넌트 리렌더링

 

클릭 이벤트가 발생했을 때 부모 컴포넌트의 콜백(onChange)을 실행하는 로직이므로 useEffect를 사용할 필요가 없다. 클릭 이벤트 핸들러 내부에서 직접 onChange를 호출하면 불필요한 렌더링을 줄일 수 있고, 코드도 더 깔끔해진다.

function Parent() {
  const [someState, setSomeState] = useState();
  return <Child onChange={(v) => setSomeState(v)} />;
}

function Child({ onChange }) {
  const [isOn, setIsOn] = useState(false);

  function handleClick() {
    const newValue = !isOn;
    setIsOn(newValue); // 로컬 상태 업데이트
    onChange(newValue); // 부모 핸들러 호출
  }

  return <button onClick={handleClick}>Toggle</button>;
}

 

 

데이터 흐름

---

리액트에선 단방향 데이터 흐름(부모 → 자식)을 따르는 것이 유지보수나 가독성 측면에서 유리하다. 이를 통해 데이터 추적이 용이해지고, 컴포넌트 간 의존성을 줄여서 코드 안정성과 재사용성을 높일 수 있다.

 

아래 코드처럼 자식 컴포넌트에서 데이터를 불러온 후 부모 컴포넌트로 전달하면 데이터 로딩 상태와 오류 처리 로직이 분산되면서 관리와 디버깅이 복잡해진다. 또한, 데이터 소유권이 불명확해지고 컴포넌트의 책임 경계가 흐려지는 단점도 있다.

function Parent() {
  const [data, setData] = useState(null);

  return <Child onFetched={setData} />;
}

function Child({ onFetched }) {
  const data = useFetchData();

  useEffect(() => {
    if (data) onFetched(data);
  }, [onFetched, data]);

  return <>{JSON.stringify(data)}</>;
}

 

부모 컴포넌트에서 데이터를 로드하고, 필요한 데이터만 자식 컴포넌트로 전달하면, 데이터 흐름이 단순해지고 컴포넌트 간 책임 분리가 쉬워진다.

function Parent() {
  const data = useFetchData();
  return <Child data={data} />;
}

function Child({ data }) {
  return <>{JSON.stringify(data)}</>;
}

 

만약 자식 컴포넌트가 데이터를 로드해야 하는 상황이라면, 부모 컴포넌트에서 정의한 핸들러를 자식 컴포넌트로 전달하여 데이터 로직의 책임을 부모 컴포넌트가 관리하도록 하는 것이 좋다.

function Parent() {
  const handleSuccess = (data) => { /* ... */ };
  const handleError = (error) => { /* ... */ };

  return <Child onSuccess={handleSuccess} onError={handleError} />;
}

function Child({ onSuccess, onError }) {
  const { data } = useMutateData({ onSuccess, onError });

  return <>{JSON.stringify(data)}</>;
}

 

 

초기화

---

컴포넌트가 마운트 될 때 한 번만 실행되는 초기화 로직은 useEffect의 두 번째 매개변수로 빈 배열 []을 전달하는 방식으로 구현할 수 있다.

function App() {
  useEffect(() => {
    someOneTimeLogic();
  }, []);
  // ...
}

 

하지만 리액트 개발 환경에서 엄격(strict) 모드가 활성화되어 있다면, 사이트 이펙트가 안전하게 처리되는지 확인하기 위해 useEffect가 한 번 더 실행된다.

 

또한 React 18 버전부터 도입된 Concurrent Mode가 활성화되면, 작업의 우선순위가 변경되거나 최적화를 위해 작업이 취소된 후 다시 시도될 수 있다. 이로 인해 렌더링이 중단되거나 재실행되는 과정에서 useEffect가 여러 번 실행될 가능성이 있다.

 

초기화 로직이 정확히 한 번만 실행되도록 보장하려면 아래 두 가지 방법을 사용할 수 있다.

// 방법1: 최상위 플래그 사용
let didInit = false;

function App() {
  useEffect(() => {
    if (!didInit) {
      didInit = true;
      someOneTimeLogic();
    }
  }, []);
  // ...
}

// 방법2: 컴포넌트 렌더링 이전에 초기화
if (typeof window !== "undefined") {
  someOneTimeLogic();
}

function App() {
  // ...
}

 

 

컴포넌트 언마운트

---

useEffect 내부에서 비동기 작업 후 상태 업데이트를 시도하면 아래와 같은 경고가 표시될 수 있다.

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

 

컴포넌트가 언마운트된 상황에서 상태 업데이트를 방지하기 위한 목적의 경고 메시지다. 만약 비동기 작업이 완료되기 전 컴포넌트가 언마운트되면, 불필요한 상태 업데이트로 인해 메모리 누수를 초래할 수 있다.

 

이를 방지하기 위해 일반적으로 useEffect의 클린업 함수를 활용하여 컴포넌트의 마운트 상태를 추적하고 안전한 상태 업데이트를 구현한다.

// 언마운트 여부를 확인하기 위한 훅
const useMountedRef = () => {
  const mounted = useRef(true);
  
  useEffect(() => {
    return () => {
      mounted.current = false;
    };
  }, []);
  
  return mounted;
};

const MyCompoenet = () => {
  const [loading, setLoading] = useState(false);
  const mountedRef = useMountedRef();

  const handleDeleteBill = async (id) => {
    setLoading(true);
    await axios.delete(`/bill/${id}`);
    // 컴포넌트가 언마운트되지 않았을 때만 상태 업데이트
    if (mountedRef.current) setLoading(false);
  };

  return (
    <button onClick={handleDeleteBill} disabled={loading}>
      Delete Bill
    </button>
  );
};

 

하지만 리액트 팀은 이러한 경고가 메모리 누수를 방지하는데 큰 도움이 되지 않으며, 오히려 개발 경험을 저해한다고 판단하여 경고를 제거했다(참고 링크). React 18 버전부턴 컴포넌트가 언마운트된 경우에도 상태 업데이트에 대한 경고 없이 코드를 작성할 수 있다.

 

컴포넌트 비동기 작업이 언마운트 상태와 관계없이 안전하게 실행될 수 있다면, 즉 비동기 작업의 결과가 컴포넌트의 상태와 직접적으로 연결되지 않다면 클린업 함수를 사용하는 복잡한 처리가 필요하지 않다. 위 예제에선 단순히 삭제 요청을 보내는 작업이기 때문에 useEffect를 제거하여 코드를 간결하게 작성할 수 있다.

const MyCompoenet = () => {
  const [loading, setLoading] = useState(false);

  const handleDeleteBill = async (id) => {
    setLoading(true);
    await axios.delete(`/bill/${id}`);
    setLoading(false);
  };

  return (
    <button onClick={handleDeleteBill} disabled={loading}>
      Delete Bill
    </button>
  );
};

 

💡 useEffect 내부에서 이벤트 리스너, 타이머, 웹소켓 구독 등을 설정하는 경우 메모리 누수나 예기치 않은 동작이 발생할 수 있기 때문에 클린업 함수를 사용해 리소스를 정리하는 것이 좋다.

 

 

레퍼런스

---

Leave useEffect Alone!