React Native 컴포넌트에서 `useEffect` 훅의 의존성 배열(dependency array)과 클린업(cleanup) 함수를 사용하여 발생할 수 있는 일반적인 메모리 누수나 불필요한 재실행 문제를 어떻게 방지할 수 있나요?

useEffect 훅에서 의존성 배열과 클린업 함수를 제대로 사용하지 않으면 메모리 누수나 불필요한 재실행 문제가 발생할 수 있습니다.

의존성 배열은 useEffect가 언제 다시 실행될지를 결정합니다. 배열에 필요한 값만 넣어야 불필요한 재실행을 막을 수 있습니다. 빈 배열 []을 사용하면 컴포넌트가 처음 마운트될 때만 실행되지만, 외부 변수를 참조하면 예상치 못한 동작이 발생할 수 있습니다. 이럴 땐 useCallback이나 useMemo를 활용해서 함수나 객체의 참조가 변경되지 않도록 관리해야 합니다.

클린업 함수는 컴포넌트가 언마운트될 때 실행되어 리소스를 정리합니다. 예를 들어, 구독을 해제하거나 타이머를 제거하는 데 사용됩니다. 클린업 함수를 제대로 구현하지 않으면 메모리 누수가 발생할 수 있습니다. 특히, 비동기 작업이나 이벤트 리스너를 사용하는 경우 클린업 함수가 필수적입니다.

useEffect(() => {
  const timer = setTimeout(() => {
    // ...
  }, 1000);

  return () => clearTimeout(timer); // 클린업 함수
}, []);

요약하자면, 의존성 배열을 통해 재실행을 제어하고, 클린업 함수를 통해 메모리 누수를 방지하는 것이 중요합니다.