React 커스텀 훅 Effect 정리(Cleanup): 견고한 애플리케이션을 위한 생명주기 관리 마스터하기

광활하게 상호 연결된 현대 웹 개발의 세계에서 React는 개발자들이 동적이고 상호작용적인 사용자 인터페이스를 구축할 수 있도록 지원하는 지배적인 기술로 부상했습니다. React 함수형 컴포넌트 패러다임의 중심에는 사이드 이펙트를 관리하기 위한 강력한 도구인 useEffect 훅이 있습니다. 하지만 큰 힘에는 큰 책임이 따르듯, 이러한 이펙트를 올바르게 정리(clean up)하는 방법을 이해하는 것은 단순히 모범 사례가 아니라, 전 세계 사용자를 대상으로 하는 안정적이고 성능이 뛰어나며 신뢰할 수 있는 애플리케이션을 구축하기 위한 근본적인 요구사항입니다.

이 포괄적인 가이드에서는 React 커스텀 훅 내에서 이펙트 정리의 중요한 측면을 깊이 파고들 것입니다. 왜 정리가 필수적인지 탐구하고, 생명주기 관리에 세심한 주의가 필요한 일반적인 시나리오를 검토하며, 이 필수 기술을 마스터하는 데 도움이 될 실용적이고 전 세계적으로 적용 가능한 예제를 제공합니다. 소셜 플랫폼, 전자상거래 사이트, 또는 분석 대시보드 중 무엇을 개발하든, 여기서 논의되는 원칙들은 애플리케이션의 상태와 반응성을 유지하는 데 보편적으로 매우 중요합니다.

React의 useEffect 훅과 그 생명주기 이해하기

정리(cleanup)를 마스터하는 여정을 시작하기 전에, useEffect 훅의 기본 사항을 간략히 되짚어 보겠습니다. React 훅과 함께 도입된 useEffect는 함수형 컴포넌트가 사이드 이펙트(side effect)를 수행할 수 있게 해줍니다. 사이드 이펙트란 React 컴포넌트 트리 외부로 나가 브라우저, 네트워크 또는 다른 외부 시스템과 상호작용하는 작업을 의미합니다. 여기에는 데이터 가져오기, DOM 수동 변경, 구독 설정 또는 타이머 시작 등이 포함될 수 있습니다.

useEffect의 기초: 이펙트는 언제 실행되는가

기본적으로 useEffect에 전달된 함수는 컴포넌트의 모든 렌더링이 완료된 후에 실행됩니다. 이를 올바르게 관리하지 않으면 사이드 이펙트가 불필요하게 실행되어 성능 문제나 잘못된 동작으로 이어질 수 있으므로 문제가 될 수 있습니다. 이펙트가 다시 실행되는 시점을 제어하기 위해 useEffect는 두 번째 인수로 의존성 배열(dependency array)을 받습니다.

• 의존성 배열이 생략되면, 이펙트는 모든 렌더링 후에 실행됩니다.
• 빈 배열([])이 제공되면, 이펙트는 초기 렌더링 후 한 번만 실행되며(componentDidMount와 유사), 정리(cleanup) 함수는 컴포넌트가 언마운트될 때 한 번 실행됩니다(componentWillUnmount와 유사).
• 의존성 배열([dep1, dep2])이 제공되면, 이펙트는 렌더링 간에 해당 의존성 중 하나라도 변경될 때만 다시 실행됩니다.

다음 기본 구조를 살펴보겠습니다:

import React, { useEffect, useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { // 의존성 배열이 없으면 이 이펙트는 모든 렌더링 후에 실행됩니다 // 또는 [count]가 의존성인 경우 'count'가 변경될 때 실행됩니다. document.title = `Count: ${count}`; // 반환되는 함수가 바로 정리(cleanup) 메커니즘입니다 return () => { // 이 함수는 이펙트가 다시 실행되기 전(의존성이 변경된 경우) // 그리고 컴포넌트가 언마운트될 때 실행됩니다. console.log('count 이펙트에 대한 정리'); }; }, [count]); // 의존성 배열: count가 변경될 때 이펙트가 다시 실행됩니다 return (

); }

"정리(Cleanup)" 부분: 언제, 왜 중요한가

useEffect의 정리 메커니즘은 이펙트 콜백에서 반환되는 함수입니다. 이 함수는 이펙트에 의해 할당된 리소스나 시작된 작업이 더 이상 필요하지 않을 때 적절하게 해제되거나 중지되도록 보장하기 때문에 매우 중요합니다. 정리 함수는 주로 다음 두 가지 시나리오에서 실행됩니다:

1. 이펙트가 다시 실행되기 전: 이펙트에 의존성이 있고 그 의존성이 변경되면, 이전 이펙트 실행의 정리 함수가 새 이펙트가 실행되기 전에 먼저 실행됩니다. 이는 새 이펙트가 깨끗한 상태에서 시작하도록 보장합니다.
2. 컴포넌트가 언마운트될 때: 컴포넌트가 DOM에서 제거될 때, 마지막 이펙트 실행의 정리 함수가 실행됩니다. 이는 메모리 누수 및 기타 문제를 방지하는 데 필수적입니다.

이 정리가 글로벌 애플리케이션 개발에 왜 그렇게 중요할까요?

• 메모리 누수 방지: 구독 해지되지 않은 이벤트 리스너, 정리되지 않은 타이머, 또는 닫히지 않은 네트워크 연결은 그것들을 생성한 컴포넌트가 언마운트된 후에도 메모리에 계속 남아 있을 수 있습니다. 시간이 지남에 따라 잊혀진 리소스들이 축적되어 성능 저하, 느려짐, 그리고 결국에는 애플리케이션 충돌로 이어집니다. 이는 전 세계 어느 사용자에게나 좌절스러운 경험입니다.
• 예상치 못한 동작 및 버그 방지: 적절한 정리 없이는, 오래된 이펙트가 오래된 데이터(stale data)로 계속 작동하거나 존재하지 않는 DOM 요소와 상호작용하여 런타임 오류, 부정확한 UI 업데이트, 심지어 보안 취약점을 유발할 수 있습니다. 더 이상 보이지 않는 컴포넌트를 위해 구독이 계속 데이터를 가져와 불필요한 네트워크 요청이나 상태 업데이트를 유발하는 상황을 상상해 보세요.
• 성능 최적화: 리소스를 신속하게 해제함으로써 애플리케이션을 가볍고 효율적으로 유지할 수 있습니다. 이는 성능이 낮은 기기를 사용하거나 네트워크 대역폭이 제한적인 사용자에게 특히 중요하며, 이는 세계 여러 지역에서 흔한 시나리오입니다.
• 데이터 일관성 보장: 정리는 예측 가능한 상태를 유지하는 데 도움이 됩니다. 예를 들어, 컴포넌트가 데이터를 가져온 후 다른 곳으로 이동할 때, fetch 작업을 정리하면 컴포넌트가 언마운트된 후에 도착하는 응답을 처리하려는 시도를 막아 오류를 방지할 수 있습니다.

커스텀 훅에서 Effect 정리가 필요한 일반적인 시나리오

커스텀 훅은 상태 저장 로직과 사이드 이펙트를 재사용 가능한 함수로 추상화하는 React의 강력한 기능입니다. 커스텀 훅을 설계할 때, 정리는 그 견고함의 필수적인 부분이 됩니다. 이펙트 정리가 절대적으로 필요한 가장 일반적인 시나리오 몇 가지를 살펴보겠습니다.

1. 구독 (웹소켓, 이벤트 이미터)

많은 현대 애플리케이션은 실시간 데이터나 통신에 의존합니다. 웹소켓, 서버-전송 이벤트(SSE), 또는 커스텀 이벤트 이미터가 대표적인 예입니다. 컴포넌트가 이러한 스트림을 구독할 때, 컴포넌트가 더 이상 데이터를 필요로 하지 않을 때 구독을 해지하는 것이 매우 중요합니다. 그렇지 않으면 구독이 계속 활성 상태로 남아 리소스를 소비하고 잠재적으로 오류를 일으킬 수 있습니다.

예제: useWebSocket 커스텀 훅

import React, { useEffect, useState } from 'react'; function useWebSocket(url) { const [message, setMessage] = useState(null); const [isConnected, setIsConnected] = useState(false); useEffect(() => { const ws = new WebSocket(url); ws.onopen = () => { console.log('웹소켓 연결됨'); setIsConnected(true); }; ws.onmessage = (event) => { console.log('메시지 수신:', event.data); setMessage(event.data); }; ws.onclose = () => { console.log('웹소켓 연결 끊김'); setIsConnected(false); }; ws.onerror = (error) => { console.error('웹소켓 오류:', error); setIsConnected(false); }; // 정리 함수 return () => { if (ws.readyState === WebSocket.OPEN) { console.log('웹소켓 연결 닫는 중'); ws.close(); } }; }, [url]); // URL이 변경되면 재연결 return { message, isConnected }; } // 컴포넌트에서의 사용 예: function RealTimeDataDisplay() { const { message, isConnected } = useWebSocket('wss://echo.websocket.events'); return (

); }

이 useWebSocket 훅에서 정리 함수는 이 훅을 사용하는 컴포넌트가 언마운트될 때(예: 사용자가 다른 페이지로 이동할 때) 웹소켓 연결이 정상적으로 닫히도록 보장합니다. 이것이 없다면 연결은 계속 열려 있게 되어 네트워크 리소스를 소비하고, UI에 더 이상 존재하지 않는 컴포넌트로 메시지를 보내려고 시도할 수 있습니다.

2. 이벤트 리스너 (DOM, 전역 객체)

document, window 또는 특정 DOM 요소에 이벤트 리스너를 추가하는 것은 흔한 사이드 이펙트입니다. 그러나 이러한 리스너는 메모리 누수를 방지하고 언마운트된 컴포넌트에서 핸들러가 호출되지 않도록 반드시 제거해야 합니다.

예제: useClickOutside 커스텀 훅

이 훅은 참조된 요소 외부의 클릭을 감지하며, 드롭다운, 모달 또는 내비게이션 메뉴에 유용합니다.

import React, { useEffect } from 'react'; function useClickOutside(ref, handler) { useEffect(() => { const listener = (event) => { // ref의 요소나 하위 요소를 클릭하면 아무것도 하지 않음 if (!ref.current || ref.current.contains(event.target)) { return; } handler(event); }; document.addEventListener('mousedown', listener); document.addEventListener('touchstart', listener); // 정리 함수: 이벤트 리스너 제거 return () => { document.removeEventListener('mousedown', listener); document.removeEventListener('touchstart', listener); }; }, [ref, handler]); // ref나 handler가 변경될 때만 다시 실행 } // 컴포넌트에서의 사용 예: function Modal() { const modalRef = React.useRef(); const [isOpen, setIsOpen] = React.useState(true); useClickOutside(modalRef, () => setIsOpen(false)); if (!isOpen) return null; return (

); }

여기서의 정리는 매우 중요합니다. 모달이 닫히고 컴포넌트가 언마운트되면, mousedown과 touchstart 리스너는 document에 계속 남아 있게 되어, 이제는 존재하지 않는 ref.current에 접근하려고 할 때 오류를 발생시키거나 예상치 못한 핸들러 호출로 이어질 수 있습니다.

3. 타이머 (setInterval, setTimeout)

타이머는 애니메이션, 카운트다운 또는 주기적인 데이터 업데이트에 자주 사용됩니다. 관리되지 않는 타이머는 React 애플리케이션에서 메모리 누수와 예상치 못한 동작의 고전적인 원인입니다.

예제: useInterval 커스텀 훅

이 훅은 정리를 자동으로 처리하는 선언적인 setInterval을 제공합니다.

import React, { useEffect, useRef } from 'react'; function useInterval(callback, delay) { const savedCallback = useRef(); // 최신 콜백을 기억합니다. useEffect(() => { savedCallback.current = callback; }, [callback]); // 인터벌을 설정합니다. useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); // 정리 함수: 인터벌을 제거합니다 return () => clearInterval(id); } }, [delay]); } // 컴포넌트에서의 사용 예: function Counter() { const [count, setCount] = React.useState(0); useInterval(() => { // 여기에 커스텀 로직을 작성합니다 setCount(count + 1); }, 1000); // 1초마다 업데이트 return

카운터: {count}

; }

여기서 정리 함수 clearInterval(id)는 매우 중요합니다. 만약 Counter 컴포넌트가 인터벌을 정리하지 않고 언마운트된다면, `setInterval` 콜백은 매초 계속 실행되어 언마운트된 컴포넌트의 setCount를 호출하려고 시도할 것이고, 이는 React가 경고를 발생시키며 메모리 문제로 이어질 수 있습니다.

4. 데이터 가져오기 및 AbortController

API 요청 자체는 일반적으로 완료된 작업을 '되돌리는' 의미의 '정리'를 필요로 하지 않지만, 진행 중인 요청은 그럴 수 있습니다. 만약 컴포넌트가 데이터 fetch를 시작하고 요청이 완료되기 전에 언마운트된다면, 프로미스는 여전히 resolve되거나 reject될 수 있으며, 이는 언마운트된 컴포넌트의 상태를 업데이트하려는 시도로 이어질 수 있습니다. AbortController는 보류 중인 fetch 요청을 취소하는 메커니즘을 제공합니다.

예제: AbortController를 사용한 useDataFetch 커스텀 훅

import React, { useState, useEffect } from 'react'; function useDataFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const abortController = new AbortController(); const signal = abortController.signal; const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url, { signal }); if (!response.ok) { throw new Error(`HTTP 오류! 상태: ${response.status}`); } const result = await response.json(); setData(result); } catch (err) { if (err.name === 'AbortError') { console.log('Fetch가 중단되었습니다'); } else { setError(err); } } finally { setLoading(false); } }; fetchData(); // 정리 함수: fetch 요청 중단 return () => { abortController.abort(); console.log('언마운트/재렌더링 시 데이터 fetch 중단됨'); }; }, [url]); // URL이 변경되면 다시 가져오기 return { data, loading, error }; } // 컴포넌트에서의 사용 예: function UserProfile({ userId }) { const { data: user, loading, error } = useDataFetch(`https://api.example.com/users/${userId}`); if (loading) return

사용자 프로필 로딩 중...

; if (error) return

오류: {error.message}

; if (!user) return

사용자 데이터 없음.

; return (

사용자 프로필

이름: {user.name}

이메일: {user.email}

); }

정리 함수에 있는 abortController.abort()는 매우 중요합니다. 만약 UserProfile이 fetch 요청이 진행 중인 동안 언마운트되면, 이 정리가 요청을 취소할 것입니다. 이는 불필요한 네트워크 트래픽을 방지하고, 더 중요하게는 나중에 프로미스가 resolve되어 언마운트된 컴포넌트의 setData나 setError를 호출하려는 시도를 막아줍니다.

5. DOM 조작 및 외부 라이브러리

DOM과 직접 상호작용하거나 자체 DOM 요소를 관리하는 서드파티 라이브러리(예: 차트 라이브러리, 지도 컴포넌트)를 통합할 때, 종종 설정 및 해제 작업을 수행해야 합니다.

예제: 차트 라이브러리 초기화 및 파기 (개념적)

import React, { useEffect, useRef } from 'react'; // ChartLibrary가 Chart.js나 D3 같은 외부 라이브러리라고 가정 import ChartLibrary from 'chart-library'; function useChart(data, options) { const chartRef = useRef(null); const chartInstance = useRef(null); useEffect(() => { if (chartRef.current) { // 마운트 시 차트 라이브러리 초기화 chartInstance.current = new ChartLibrary(chartRef.current, { data, options }); } // 정리 함수: 차트 인스턴스 파기 return () => { if (chartInstance.current) { chartInstance.current.destroy(); // 라이브러리에 destroy 메서드가 있다고 가정 chartInstance.current = null; } }; }, [data, options]); // 데이터나 옵션이 변경되면 다시 초기화 return chartRef; } // 컴포넌트에서의 사용 예: function SalesChart({ salesData }) { const chartContainerRef = useChart(salesData, { type: 'bar' }); return (

); }

정리 함수에 있는 chartInstance.current.destroy()는 필수적입니다. 이것이 없으면, 차트 라이브러리가 DOM 요소, 이벤트 리스너 또는 기타 내부 상태를 남겨두어 메모리 누수를 유발하고, 같은 위치에 다른 차트가 초기화되거나 컴포넌트가 다시 렌더링될 때 잠재적인 충돌을 일으킬 수 있습니다.

정리(Cleanup) 기능을 갖춘 견고한 커스텀 훅 만들기

커스텀 훅의 힘은 복잡한 로직을 캡슐화하여 재사용 가능하고 테스트하기 쉽게 만드는 능력에 있습니다. 이러한 훅 내에서 정리를 적절하게 관리하면 이 캡슐화된 로직이 견고하고 사이드 이펙트 관련 문제가 없도록 보장할 수 있습니다.

철학: 캡슐화와 재사용성

커스텀 훅은 '반복하지 마세요'(Don't Repeat Yourself, DRY) 원칙을 따를 수 있게 해줍니다. 여러 컴포넌트에 useEffect 호출과 해당 정리 로직을 흩어놓는 대신, 커스텀 훅에 중앙 집중화할 수 있습니다. 이는 코드를 더 깨끗하고 이해하기 쉬우며 오류 발생 가능성이 적게 만듭니다. 커스텀 훅이 자체 정리를 처리하면, 해당 훅을 사용하는 모든 컴포넌트는 자동으로 책임감 있는 리소스 관리의 이점을 누리게 됩니다.

앞선 예제들을 개선하고 확장하며, 글로벌 애플리케이션과 모범 사례를 강조해 보겠습니다.

예제 1: useWindowSize – 전역 반응형 이벤트 리스너 훅

반응형 디자인은 다양한 화면 크기와 장치를 수용하는 글로벌 사용자를 위해 핵심적입니다. 이 훅은 창 크기를 추적하는 데 도움이 됩니다.

import React, { useState, useEffect } from 'react'; function useWindowSize() { const [windowSize, setWindowSize] = useState({ width: typeof window !== 'undefined' ? window.innerWidth : 0, height: typeof window !== 'undefined' ? window.innerHeight : 0, }); useEffect(() => { // SSR 환경을 위해 window가 정의되어 있는지 확인 if (typeof window === 'undefined') { return; } const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; window.addEventListener('resize', handleResize); // 정리 함수: 이벤트 리스너 제거 return () => { window.removeEventListener('resize', handleResize); }; }, []); // 빈 의존성 배열은 이 이펙트가 마운트 시 한 번 실행되고 언마운트 시 정리됨을 의미 return windowSize; } // 사용 예: function ResponsiveComponent() { const { width, height } = useWindowSize(); return (

); }

여기서 빈 의존성 배열 []는 이벤트 리스너가 컴포넌트가 마운트될 때 한 번 추가되고 언마운트될 때 한 번 제거됨을 의미하며, 여러 리스너가 부착되거나 컴포넌트가 사라진 후에도 남아 있는 것을 방지합니다. typeof window !== 'undefined' 확인은 초기 로드 시간과 SEO를 개선하기 위해 현대 웹 개발에서 흔히 사용되는 서버-사이드 렌더링(SSR) 환경과의 호환성을 보장합니다.

예제 2: useOnlineStatus – 전역 네트워크 상태 관리

네트워크 연결에 의존하는 애플리케이션(예: 실시간 협업 도구, 데이터 동기화 앱)의 경우, 사용자의 온라인 상태를 아는 것이 필수적입니다. 이 훅은 적절한 정리와 함께 이를 추적하는 방법을 제공합니다.

import React, { useState, useEffect } from 'react'; function useOnlineStatus() { const [isOnline, setIsOnline] = useState(typeof navigator !== 'undefined' ? navigator.onLine : true); useEffect(() => { // SSR 환경을 위해 navigator가 정의되어 있는지 확인 if (typeof navigator === 'undefined') { return; } const handleOnline = () => setIsOnline(true); const handleOffline = () => setIsOnline(false); window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); // 정리 함수: 이벤트 리스너 제거 return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); // 마운트 시 한 번 실행, 언마운트 시 정리 return isOnline; } // 사용 예: function NetworkStatusIndicator() { const isOnline = useOnlineStatus(); return (

네트워크 상태: {isOnline ? '연결됨' : '연결 끊김'}. 이는 인터넷 연결이 불안정한 지역의 사용자에게 피드백을 제공하는 데 매우 중요합니다.

); }

useWindowSize와 유사하게, 이 훅은 window 객체에 전역 이벤트 리스너를 추가하고 제거합니다. 정리 없이는 이러한 리스너가 계속 남아 언마운트된 컴포넌트의 상태를 계속 업데이트하여 메모리 누수와 콘솔 경고를 유발할 것입니다. navigator에 대한 초기 상태 확인은 SSR 호환성을 보장합니다.

예제 3: useKeyPress – 접근성을 위한 고급 이벤트 리스너 관리

상호작용적인 애플리케이션은 종종 키보드 입력을 요구합니다. 이 훅은 특정 키 누름을 감지하는 방법을 보여주며, 이는 전 세계적으로 접근성과 향상된 사용자 경험에 매우 중요합니다.

import React, { useState, useEffect } from 'react'; function useKeyPress(targetKey) { const [keyPressed, setKeyPressed] = useState(false); useEffect(() => { const downHandler = ({ key }) => { if (key === targetKey) { setKeyPressed(true); } }; const upHandler = ({ key }) => { if (key === targetKey) { setKeyPressed(false); } }; window.addEventListener('keydown', downHandler); window.addEventListener('keyup', upHandler); // 정리 함수: 두 이벤트 리스너 모두 제거 return () => { window.removeEventListener('keydown', downHandler); window.removeEventListener('keyup', upHandler); }; }, [targetKey]); // targetKey가 변경되면 다시 실행 return keyPressed; } // 사용 예: function KeyboardListener() { const isSpacePressed = useKeyPress(' '); const isEnterPressed = useKeyPress('Enter'); return (

); }

여기서 정리 함수는 keydown과 keyup 리스너를 모두 신중하게 제거하여 남아 있지 않도록 합니다. targetKey 의존성이 변경되면, 이전 키에 대한 리스너는 제거되고 새 키에 대한 새 리스너가 추가되어 관련 있는 리스너만 활성 상태로 유지됩니다.

예제 4: useInterval – `useRef`를 활용한 견고한 타이머 관리 훅

앞서 useInterval을 보았습니다. 이제 useRef가 이펙트에서 타이머 사용 시 흔한 문제인 오래된 클로저(stale closure)를 어떻게 방지하는지 자세히 살펴보겠습니다.

import React, { useEffect, useRef } from 'react'; function useInterval(callback, delay) { const savedCallback = useRef(); // 최신 콜백을 기억합니다. 이렇게 하면 'callback' 자체가 자주 변경되는 컴포넌트 상태에 의존하더라도 // 항상 최신 'callback' 함수를 가질 수 있습니다. // 이 이펙트는 'callback' 자체가 변경될 때만(예: 'useCallback' 때문에) 다시 실행됩니다. useEffect(() => { savedCallback.current = callback; }, [callback]); // 인터벌을 설정합니다. 이 이펙트는 'delay'가 변경될 때만 다시 실행됩니다. useEffect(() => { function tick() { // ref에서 최신 콜백을 사용 savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); // delay가 변경될 때만 인터벌 설정을 다시 실행 } // 사용 예: function Stopwatch() { const [seconds, setSeconds] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); useInterval( () => { if (isRunning) { setSeconds((prevSeconds) => prevSeconds + 1); } }, isRunning ? 1000 : null // 실행 중이 아닐 때는 delay를 null로 하여 인터벌을 일시 중지 ); return (

); }

savedCallback에 useRef를 사용하는 것은 중요한 패턴입니다. 이것이 없다면, callback(예: setCount(count + 1)를 사용하여 카운터를 증가시키는 함수)이 두 번째 useEffect의 의존성 배열에 직접 포함될 경우, count가 변경될 때마다 인터벌이 정리되고 재설정되어 신뢰할 수 없는 타이머가 될 것입니다. 최신 콜백을 ref에 저장함으로써, 인터벌 자체는 delay가 변경될 때만 재설정하면 되고, `tick` 함수는 항상 최신 버전의 `callback` 함수를 호출하여 오래된 클로저를 피할 수 있습니다.

예제 5: useDebounce – 타이머와 정리(Cleanup)를 통한 성능 최적화

디바운싱은 함수 호출 속도를 제한하는 일반적인 기술로, 검색 입력이나 비용이 많이 드는 계산에 자주 사용됩니다. 여러 타이머가 동시에 실행되는 것을 방지하기 위해 여기서는 정리가 매우 중요합니다.

import React, { useState, useEffect } from 'react'; function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { // 디바운스된 값을 업데이트하기 위해 타임아웃 설정 const handler = setTimeout(() => { setDebouncedValue(value); }, delay); // 정리 함수: 타임아웃이 실행되기 전에 value나 delay가 변경되면 타임아웃을 제거 return () => { clearTimeout(handler); }; }, [value, delay]); // value나 delay가 변경될 때만 이펙트 재호출 return debouncedValue; } // 사용 예: function SearchBar() { const [searchTerm, setSearchTerm] = useState(''); const debouncedSearchTerm = useDebounce(searchTerm, 500); // 500ms로 디바운스 useEffect(() => { if (debouncedSearchTerm) { console.log('검색 중:', debouncedSearchTerm); // 실제 앱에서는 여기서 API 호출을 보냅니다 } }, [debouncedSearchTerm]); return (

); }

정리 함수의 clearTimeout(handler)는 사용자가 빠르게 입력할 경우 이전의 보류 중인 타임아웃이 취소되도록 보장합니다. delay 기간 내의 마지막 입력만이 setDebouncedValue를 트리거합니다. 이는 API 호출과 같은 비용이 많이 드는 작업의 과부하를 방지하고 애플리케이션 응답성을 향상시켜 전 세계 사용자에게 큰 이점을 제공합니다.

고급 정리 패턴 및 고려 사항

이펙트 정리의 기본 원칙은 간단하지만, 실제 애플리케이션은 종종 더 미묘한 도전에 직면합니다. 고급 패턴과 고려 사항을 이해하면 커스텀 훅이 견고하고 적응력이 있도록 보장할 수 있습니다.

의존성 배열 이해하기: 양날의 검

의존성 배열은 이펙트가 언제 실행될지를 결정하는 문지기입니다. 이를 잘못 관리하면 두 가지 주요 문제로 이어질 수 있습니다.

• 의존성 누락: 이펙트 내부에서 사용하는 값을 의존성 배열에 포함하는 것을 잊으면, 이펙트가 "오래된(stale)" 클로저로 실행될 수 있습니다. 즉, 오래된 버전의 상태나 props를 참조하게 됩니다. 이는 미묘한 버그와 잘못된 동작으로 이어질 수 있으며, 이펙트(와 그 정리 함수)가 오래된 정보로 작동할 수 있습니다. React ESLint 플러그인은 이러한 문제를 잡는 데 도움이 됩니다.
• 과도한 의존성 지정: 불필요한 의존성, 특히 모든 렌더링에서 다시 생성되는 객체나 함수를 포함하면 이펙트가 너무 자주 다시 실행(따라서 다시 정리되고 다시 설정)될 수 있습니다. 이는 성능 저하, 깜박이는 UI 및 비효율적인 리소스 관리로 이어질 수 있습니다.

의존성을 안정화하려면, 함수에는 useCallback을 사용하고, 재계산 비용이 비싼 객체나 값에는 useMemo를 사용하세요. 이 훅들은 값을 메모이제이션하여, 의존성이 실질적으로 변경되지 않았을 때 자식 컴포넌트의 불필요한 재렌더링이나 이펙트의 재실행을 방지합니다.

import React, { useEffect, useState, useCallback, useMemo } from 'react'; function ParentComponent() { const [count, setCount] = useState(0); const [filter, setFilter] = useState(''); // useEffect가 불필요하게 재실행되는 것을 막기 위해 함수를 메모이제이션 const fetchData = useCallback(async () => { console.log('필터로 데이터 가져오는 중:', filter); // 여기에 API 호출이 있다고 상상해보세요 return `count ${count}에서 ${filter}에 대한 데이터`; }, [filter, count]); // fetchData는 filter나 count가 변경될 때만 변경됨 // 불필요한 재렌더링/이펙트를 방지하기 위해 의존성으로 사용되는 객체를 메모이제이션 const complexOptions = useMemo(() => ({ retryAttempts: 3, timeout: 5000 }), []); // 빈 의존성 배열은 options 객체가 한 번만 생성됨을 의미 useEffect(() => { let isActive = true; fetchData().then(data => { if (isActive) { console.log('수신:', data); } }); return () => { isActive = false; console.log('fetch 이펙트에 대한 정리.'); }; }, [fetchData, complexOptions]); // 이제 이 이펙트는 fetchData나 complexOptions가 정말로 변경될 때만 실행됨 return (

); }

`useRef`로 오래된 클로저(Stale Closure) 처리하기

우리는 useRef가 렌더링을 트리거하지 않으면서 렌더링 간에 지속되는 가변 값을 저장할 수 있다는 것을 보았습니다. 이는 정리 함수(또는 이펙트 자체)가 prop이나 상태의 *최신* 버전에 접근해야 하지만, 해당 prop/상태를 의존성 배열에 포함하고 싶지 않을 때(이펙트가 너무 자주 재실행되므로) 특히 유용합니다.

2초 후에 메시지를 기록하는 이펙트를 생각해 보세요. `count`가 변경되면, 정리 함수는 *최신* count가 필요합니다.

import React, { useEffect, useState, useRef } from 'react'; function DelayedLogger() { const [count, setCount] = useState(0); const latestCount = useRef(count); // ref를 최신 count로 계속 업데이트 useEffect(() => { latestCount.current = count; }, [count]); useEffect(() => { const timeoutId = setTimeout(() => { // 이것은 항상 타임아웃이 설정되었을 때의 현재 count 값을 기록합니다 console.log(`이펙트 콜백: Count는 ${count}였습니다`); // 이것은 useRef 덕분에 항상 최신 count 값을 기록합니다 console.log(`ref를 통한 이펙트 콜백: 최신 count는 ${latestCount.current}입니다`); }, 2000); return () => { clearTimeout(timeoutId); // 이 정리 함수는 latestCount.current에도 접근할 수 있습니다 console.log(`정리: 정리 시점의 최신 count는 ${latestCount.current}였습니다`); }; }, []); // 빈 의존성 배열, 이펙트는 한 번만 실행됨 return (

); }

DelayedLogger가 처음 렌더링될 때, 빈 의존성 배열을 가진 `useEffect`가 실행됩니다. `setTimeout`이 예약됩니다. 2초가 지나기 전에 count를 여러 번 증가시키면, `latestCount.current`는 첫 번째 `useEffect`(모든 `count` 변경 후에 실행됨)를 통해 업데이트됩니다. `setTimeout`이 마침내 실행될 때, 클로저에 있는 `count`(이펙트가 실행될 당시의 count)에 접근하지만, 현재 ref의 `latestCount.current`에 접근하여 가장 최근의 상태를 반영합니다. 이 차이점은 견고한 이펙트를 위해 매우 중요합니다.

한 컴포넌트 내 여러 Effect 사용 vs. 커스텀 훅

단일 컴포넌트 내에 여러 useEffect 호출을 두는 것은 완벽하게 허용됩니다. 사실, 각 이펙트가 별개의 사이드 이펙트를 관리할 때 권장됩니다. 예를 들어, 한 useEffect는 데이터 가져오기를 처리하고, 다른 하나는 웹소켓 연결을 관리하며, 세 번째는 전역 이벤트를 수신할 수 있습니다.

그러나 이러한 별개의 이펙트가 복잡해지거나 여러 컴포넌트에 걸쳐 동일한 이펙트 로직을 재사용하는 자신을 발견한다면, 이는 해당 로직을 커스텀 훅으로 추상화해야 한다는 강력한 신호입니다. 커스텀 훅은 모듈성, 재사용성 및 쉬운 테스트를 촉진하여, 대규모 프로젝트와 다양한 개발팀을 위해 코드베이스를 더 관리하기 쉽고 확장 가능하게 만듭니다.

Effect 내 오류 처리

사이드 이펙트는 실패할 수 있습니다. API 호출은 오류를 반환할 수 있고, 웹소켓 연결은 끊어질 수 있으며, 외부 라이브러리는 예외를 발생시킬 수 있습니다. 커스텀 훅은 이러한 시나리오를 우아하게 처리해야 합니다.

• 상태 관리: 오류 상태를 반영하기 위해 로컬 상태(예: setError(true))를 업데이트하여 컴포넌트가 오류 메시지나 대체 UI를 렌더링할 수 있도록 합니다.
• 로깅: console.error()를 사용하거나 전역 오류 로깅 서비스와 통합하여 문제를 캡처하고 보고하세요. 이는 다양한 환경과 사용자 기반에 걸쳐 디버깅하는 데 매우 유용합니다.
• 재시도 메커니즘: 네트워크 작업의 경우, 일시적인 네트워크 문제를 처리하기 위해 훅 내에 재시도 로직(적절한 지수 백오프 포함)을 구현하는 것을 고려하세요. 이는 인터넷 접속이 덜 안정적인 지역의 사용자에게 복원력을 향상시킵니다.

import React, { useState, useEffect } from 'react'; function useReliableDataFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [retries, setRetries] = useState(0); useEffect(() => { const abortController = new AbortController(); const signal = abortController.signal; let timeoutId; const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url, { signal }); if (!response.ok) { if (response.status === 404) { throw new Error('리소스를 찾을 수 없습니다.'); } else if (response.status >= 500) { throw new Error('서버 오류, 다시 시도해주세요.'); } else { throw new Error(`HTTP 오류! 상태: ${response.status}`); } } const result = await response.json(); setData(result); setRetries(0); // 성공 시 재시도 횟수 초기화 } catch (err) { if (err.name === 'AbortError') { console.log('Fetch가 의도적으로 중단되었습니다'); } else { console.error('Fetch 오류:', err); setError(err); // 특정 오류나 재시도 횟수에 대한 재시도 로직 구현 if (retries < 3) { // 최대 3번 재시도 timeoutId = setTimeout(() => { setRetries(prev => prev + 1); }, Math.pow(2, retries) * 1000); // 지수 백오프 (1초, 2초, 4초) } } } finally { setLoading(false); } }; fetchData(); return () => { abortController.abort(); clearTimeout(timeoutId); // 언마운트/재렌더링 시 재시도 타임아웃 제거 }; }, [url, retries]); // URL 변경 또는 재시도 시 재실행 return { data, loading, error, retries }; } // 사용 예: function BlogPost({ postId }) { const { data: post, loading, error, retries } = useReliableDataFetch(`https://api.example.com/posts/${postId}`); if (loading) return

블로그 포스트 로딩 중... (재시도: {retries})

; if (error) return

오류: {error.message} {retries < 3 && '곧 재시도합니다...'}

; if (!post) return

블로그 포스트 데이터 없음.

; return (

{post.title}

{post.author}

{post.content}

); }

이 향상된 훅은 재시도 타임아웃을 제거하는 적극적인 정리를 보여주며, 견고한 오류 처리와 간단한 재시도 메커니즘을 추가하여 애플리케이션이 일시적인 네트워크 문제나 백엔드 결함에 더 탄력적으로 대응하도록 만들어 전 세계적으로 사용자 경험을 향상시킵니다.

정리(Cleanup) 기능이 있는 커스텀 훅 테스트하기

철저한 테스트는 모든 소프트웨어, 특히 커스텀 훅의 재사용 가능한 로직에 있어 가장 중요합니다. 사이드 이펙트와 정리가 있는 훅을 테스트할 때, 다음을 확인해야 합니다:

• 의존성이 변경될 때 이펙트가 올바르게 실행되는지.
• 이펙트가 다시 실행되기 전에 정리 함수가 호출되는지(의존성이 변경된 경우).
• 컴포넌트(또는 훅의 소비자)가 언마운트될 때 정리 함수가 호출되는지.
• 리소스가 올바르게 해제되는지(예: 이벤트 리스너 제거, 타이머 정리).

@testing-library/react-hooks(또는 컴포넌트 수준 테스트를 위한 @testing-library/react)와 같은 라이브러리는 훅을 격리하여 테스트할 수 있는 유틸리티를 제공하며, 여기에는 재렌더링 및 언마운팅을 시뮬레이션하는 메서드가 포함되어 있어 정리 함수가 예상대로 작동하는지 확인할 수 있습니다.

커스텀 훅에서 Effect 정리를 위한 모범 사례

요약하자면, React 커스텀 훅에서 이펙트 정리를 마스터하여 모든 대륙과 장치의 사용자에게 견고하고 성능이 뛰어난 애플리케이션을 보장하기 위한 필수적인 모범 사례는 다음과 같습니다:

• 항상 정리(Cleanup) 제공: useEffect가 이벤트 리스너를 등록하거나, 구독을 설정하거나, 타이머를 시작하거나, 다른 외부 리소스를 할당하는 경우, 해당 작업을 되돌리는 정리 함수를 반드시 반환해야 합니다.
• Effect를 집중적으로 유지: 각 useEffect 훅은 이상적으로 단일하고 응집력 있는 사이드 이펙트를 관리해야 합니다. 이는 이펙트를 읽고, 디버깅하고, 그 정리 로직을 포함하여 추론하기 쉽게 만듭니다.
• 의존성 배열에 주의: 의존성 배열을 정확하게 정의하세요. 마운트/언마운트 이펙트에는 `[]`를 사용하고, 이펙트가 의존하는 컴포넌트 범위의 모든 값(props, state, 함수)을 포함하세요. useCallback과 useMemo를 활용하여 함수 및 객체 의존성을 안정화시켜 불필요한 이펙트 재실행을 방지하세요.
• 가변 값에 useRef 활용: 이펙트나 그 정리 함수가 *최신* 가변 값(상태나 props 등)에 접근해야 하지만 해당 값이 이펙트의 재실행을 트리거하기를 원하지 않을 때, 그 값을 useRef에 저장하세요. 해당 값을 의존성으로 하는 별도의 useEffect에서 ref를 업데이트하세요.
• 복잡한 로직 추상화: 이펙트(또는 관련 이펙트 그룹)가 복잡해지거나 여러 곳에서 사용되는 경우, 이를 커스텀 훅으로 추출하세요. 이는 코드 구성, 재사용성 및 테스트 용이성을 향상시킵니다.
• 정리(Cleanup) 로직 테스트: 커스텀 훅의 정리 로직 테스트를 개발 워크플로우에 통합하세요. 컴포넌트가 언마운트되거나 의존성이 변경될 때 리소스가 올바르게 할당 해제되는지 확인하세요.
• 서버-사이드 렌더링(SSR) 고려: useEffect와 그 정리 함수는 SSR 중 서버에서 실행되지 않는다는 점을 기억하세요. 초기 서버 렌더링 중에 브라우저 특정 API(window나 document 등)가 없는 상황을 코드가 우아하게 처리하도록 하세요.
• 견고한 오류 처리 구현: 이펙트 내에서 발생할 수 있는 잠재적 오류를 예상하고 처리하세요. 상태를 사용하여 UI에 오류를 전달하고 진단을 위해 로깅 서비스를 사용하세요. 네트워크 작업의 경우, 복원력을 위해 재시도 메커니즘을 고려하세요.

결론: 책임감 있는 생명주기 관리로 React 애플리케이션 강화하기

React 커스텀 훅은 부지런한 이펙트 정리와 결합하여 고품질 웹 애플리케이션을 구축하는 데 없어서는 안 될 도구입니다. 생명주기 관리 기술을 마스터함으로써 메모리 누수를 방지하고, 예상치 못한 동작을 제거하며, 성능을 최적화하고, 사용자의 위치, 장치 또는 네트워크 조건에 관계없이 더 신뢰할 수 있고 일관된 경험을 만들어냅니다.

useEffect의 힘과 함께 오는 책임을 받아들이세요. 정리를 염두에 두고 커스텀 훅을 신중하게 설계함으로써, 당신은 단지 기능적인 코드를 작성하는 것이 아니라, 시간과 규모의 시험을 견디고 다양하고 글로벌한 사용자에게 서비스를 제공할 준비가 된, 복원력 있고 효율적이며 유지보수 가능한 소프트웨어를 만드는 것입니다. 이러한 원칙에 대한 당신의 헌신은 의심할 여지없이 더 건강한 코드베이스와 더 행복한 사용자로 이어질 것입니다.