React use Hook: 비동기 리소스 소비 마스터하기

React 훅은 함수형 컴포넌트에서 상태와 사이드 이펙트를 관리하는 방식에 혁명을 일으켰습니다. 가장 강력한 조합 중 하나는 useEffect와 useState를 사용하여 API에서 데이터를 가져오는 것과 같은 비동기 리소스 소비를 처리하는 것입니다. 이 글에서는 훅을 사용한 비동기 작업의 복잡성을 깊이 파고들어, 견고하고 전 세계적으로 접근 가능한 React 애플리케이션을 구축하기 위한 모범 사례, 오류 처리 및 성능 최적화를 다룹니다.

기본 사항 이해하기: useEffect와 useState

더 복잡한 시나리오에 들어가기 전에, 관련된 기본 훅들을 다시 살펴보겠습니다:

• useEffect: 이 훅을 사용하면 함수형 컴포넌트에서 사이드 이펙트를 수행할 수 있습니다. 사이드 이펙트에는 데이터 가져오기, 구독 또는 DOM 직접 조작 등이 포함될 수 있습니다.
• useState: 이 훅을 사용하면 함수형 컴포넌트에 상태를 추가할 수 있습니다. 상태는 로딩 상태나 API에서 가져온 데이터와 같이 시간에 따라 변하는 데이터를 관리하는 데 필수적입니다.

데이터를 가져오는 일반적인 패턴은 비동기 요청을 시작하기 위해 useEffect를 사용하고, 데이터, 로딩 상태 및 잠재적 오류를 저장하기 위해 useState를 사용하는 것입니다.

간단한 데이터 가져오기 예제

가상의 API에서 사용자 데이터를 가져오는 기본 예제부터 시작하겠습니다:

예제: 사용자 데이터 가져오기

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [userId]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

이 예제에서 useEffect는 userId prop이 변경될 때마다 사용자 데이터를 가져옵니다. fetch API의 비동기적 특성을 처리하기 위해 async 함수를 사용합니다. 또한 컴포넌트는 더 나은 사용자 경험을 제공하기 위해 로딩 및 오류 상태를 관리합니다.

로딩 및 오류 상태 처리하기

로딩 중에 시각적 피드백을 제공하고 오류를 정상적으로 처리하는 것은 좋은 사용자 경험을 위해 매우 중요합니다. 이전 예제는 이미 기본적인 로딩 및 오류 처리를 보여주었습니다. 이러한 개념을 확장해 보겠습니다.

로딩 상태

로딩 상태는 데이터가 로드되고 있음을 명확하게 나타내야 합니다. 이는 간단한 로딩 메시지나 더 정교한 로딩 스피너를 사용하여 달성할 수 있습니다.

예제: 로딩 스피너 사용하기

간단한 텍스트 메시지 대신 로딩 스피너 컴포넌트를 사용할 수 있습니다:

```javascript // LoadingSpinner.js import React from 'react'; function LoadingSpinner() { return

; // 실제 스피너 컴포넌트로 교체하세요 } export default LoadingSpinner; ```

```javascript // UserProfile.js (수정됨) import React, { useState, useEffect } from 'react'; import LoadingSpinner from './LoadingSpinner'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // 이전과 동일한 useEffect if (loading) { return ; // 로딩 스피너 컴포넌트 사용 } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ... ); // 이전과 동일한 return } export default UserProfile; ```

오류 처리

오류 처리는 사용자에게 유용한 정보를 제공하고 잠재적으로 오류에서 복구할 수 있는 방법을 제공해야 합니다. 이는 요청을 재시도하거나 지원을 위한 연락처 정보를 제공하는 것을 포함할 수 있습니다.

예제: 사용자 친화적인 오류 메시지 표시하기

```javascript // UserProfile.js (수정됨) import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // 이전과 동일한 useEffect if (loading) { return

Loading user data...

; } if (error) { return ( ); } if (!user) { return

No user data available.

; } return ( ... ); // 이전과 동일한 return } export default UserProfile; ```

재사용성을 위한 커스텀 훅 만들기

여러 컴포넌트에서 동일한 데이터 가져오기 로직을 반복하고 있다면, 커스텀 훅을 만들 때입니다. 커스텀 훅은 코드 재사용성과 유지보수성을 향상시킵니다.

예제: useFetch 훅

데이터 가져오기 로직을 캡슐화하는 useFetch 훅을 만들어 봅시다:

```javascript // useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

이제 컴포넌트에서 useFetch 훅을 사용할 수 있습니다:

```javascript // UserProfile.js (수정됨) import React from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

useFetch 훅은 컴포넌트 로직을 크게 단순화하고 애플리케이션의 다른 부분에서 데이터 가져오기 기능을 더 쉽게 재사용할 수 있게 합니다. 이는 수많은 데이터 종속성을 가진 복잡한 애플리케이션에 특히 유용합니다.

성능 최적화

비동기 리소스 소비는 애플리케이션 성능에 영향을 미칠 수 있습니다. 훅을 사용할 때 성능을 최적화하기 위한 몇 가지 전략은 다음과 같습니다:

1. 디바운싱과 스로틀링

검색 입력과 같이 자주 변경되는 값을 다룰 때, 디바운싱과 스로틀링은 과도한 API 호출을 방지할 수 있습니다. 디바운싱은 특정 지연 시간 후에 함수가 호출되도록 보장하는 반면, 스로틀링은 함수가 호출될 수 있는 속도를 제한합니다.

예제: 검색 입력 디바운싱하기```javascript import React, { useState, useEffect } from 'react'; import useFetch from './useFetch'; function SearchComponent() { const [searchTerm, setSearchTerm] = useState(''); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(''); useEffect(() => { const timerId = setTimeout(() => { setDebouncedSearchTerm(searchTerm); }, 500); // 500ms 지연 return () => { clearTimeout(timerId); }; }, [searchTerm]); const { data: results, loading, error } = useFetch(`https://api.example.com/search?q=${debouncedSearchTerm}`); const handleInputChange = (event) => { setSearchTerm(event.target.value); }; return (

); } export default SearchComponent; ```

이 예제에서 debouncedSearchTerm은 사용자가 500ms 동안 타이핑을 멈춘 후에만 업데이트되므로, 모든 키 입력마다 불필요한 API 호출을 방지합니다. 이는 성능을 향상시키고 서버 부하를 줄입니다.

2. 캐싱

가져온 데이터를 캐싱하면 API 호출 수를 크게 줄일 수 있습니다. 다음과 같은 여러 수준에서 캐싱을 구현할 수 있습니다:

• 브라우저 캐시: API가 적절한 HTTP 캐싱 헤더를 사용하도록 구성합니다.
• 인메모리 캐시: 애플리케이션 내에서 가져온 데이터를 저장하기 위해 간단한 객체를 사용합니다.
• 영구 저장소: 장기 캐싱을 위해 localStorage 또는 sessionStorage를 사용합니다.

예제: useFetch에 간단한 인메모리 캐시 구현하기

```javascript // useFetch.js (수정됨) import { useState, useEffect } from 'react'; const cache = {}; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); if (cache[url]) { setData(cache[url]); setLoading(false); return; } try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); cache[url] = jsonData; setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

이 예제는 간단한 인메모리 캐시를 추가합니다. 특정 URL에 대한 데이터가 이미 캐시에 있는 경우, 새로운 API 호출을 하는 대신 캐시에서 직접 데이터를 가져옵니다. 이는 자주 액세스하는 데이터의 성능을 극적으로 향상시킬 수 있습니다.

3. 메모이제이션

React의 useMemo 훅은 가져온 데이터에 의존하는 비용이 많이 드는 계산을 메모이즈하는 데 사용할 수 있습니다. 이는 데이터가 변경되지 않았을 때 불필요한 재렌더링을 방지합니다.

예제: 파생 값 메모이즈하기

```javascript import React, { useMemo } from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); const formattedName = useMemo(() => { if (!user) return ''; return `${user.firstName} ${user.lastName}`; }, [user]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

이 예제에서 formattedName은 user 객체가 변경될 때만 다시 계산됩니다. user 객체가 동일하게 유지되면 메모이즈된 값이 반환되어 불필요한 계산과 재렌더링을 방지합니다.

4. 코드 스플리팅

코드 스플리팅을 사용하면 애플리케이션을 더 작은 청크로 분할하여 필요할 때 로드할 수 있습니다. 이는 특히 많은 종속성을 가진 대규모 애플리케이션의 초기 로드 시간을 개선할 수 있습니다.

예제: 컴포넌트 지연 로딩하기

```javascript import React, { lazy, Suspense } from 'react'; const UserProfile = lazy(() => import('./UserProfile')); function App() { return ( Loading user profile...

}> ); } export default App; ```

이 예제에서 UserProfile 컴포넌트는 필요할 때만 로드됩니다. Suspense 컴포넌트는 컴포넌트가 로드되는 동안 대체 UI를 제공합니다.

경쟁 상태 처리하기

경쟁 상태는 동일한 useEffect 훅에서 여러 비동기 작업이 시작될 때 발생할 수 있습니다. 모든 작업이 완료되기 전에 컴포넌트가 마운트 해제되면 오류나 예기치 않은 동작이 발생할 수 있습니다. 컴포넌트가 마운트 해제될 때 이러한 작업을 정리하는 것이 중요합니다.

예제: 정리 함수로 경쟁 상태 방지하기

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let isMounted = true; // 컴포넌트 마운트 상태를 추적하기 위한 플래그 추가 const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (isMounted) { // 컴포넌트가 여전히 마운트된 경우에만 상태 업데이트 setUser(data); } } catch (error) { if (isMounted) { // 컴포넌트가 여전히 마운트된 경우에만 상태 업데이트 setError(error); } } finally { if (isMounted) { // 컴포넌트가 여전히 마운트된 경우에만 상태 업데이트 setLoading(false); } } }; fetchData(); return () => { isMounted = false; // 컴포넌트가 마운트 해제될 때 플래그를 false로 설정 }; }, [userId]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return (

{user.name}

Email: {user.email}

Location: {user.location}

); } export default UserProfile; ```

이 예제에서는 isMounted 플래그를 사용하여 컴포넌트가 여전히 마운트되어 있는지 추적합니다. 상태는 컴포넌트가 여전히 마운트된 경우에만 업데이트됩니다. 정리 함수는 컴포넌트가 마운트 해제될 때 플래그를 false로 설정하여 경쟁 상태와 메모리 누수를 방지합니다. 대안적인 접근 방식은 특히 대용량 다운로드나 장기 실행 작업에서 중요한 AbortController API를 사용하여 fetch 요청을 취소하는 것입니다.

비동기 리소스 소비에 대한 전역적 고려 사항

전 세계 사용자를 대상으로 React 애플리케이션을 구축할 때는 다음 요소를 고려하십시오:

• 네트워크 지연 시간: 세계 각지의 사용자는 다양한 네트워크 지연 시간을 경험할 수 있습니다. API 엔드포인트의 속도를 최적화하고 캐싱 및 코드 스플리팅과 같은 기술을 사용하여 지연 시간의 영향을 최소화하십시오. CDN(콘텐츠 전송 네트워크)을 사용하여 사용자에게 더 가까운 서버에서 정적 자산을 제공하는 것을 고려하십시오. 예를 들어, API가 미국에서 호스팅되는 경우 아시아 사용자는 상당한 지연을 경험할 수 있습니다. CDN은 다양한 위치에 API 응답을 캐시하여 데이터가 이동해야 하는 거리를 줄일 수 있습니다.
• 데이터 현지화: 사용자의 위치에 따라 날짜, 통화, 숫자와 같은 데이터를 현지화할 필요성을 고려하십시오. react-intl과 같은 국제화(i18n) 라이브러리를 사용하여 데이터 서식을 처리하십시오.
• 접근성: 애플리케이션이 장애가 있는 사용자도 접근할 수 있도록 하십시오. ARIA 속성을 사용하고 접근성 모범 사례를 따르십시오. 예를 들어, 이미지에 대체 텍스트를 제공하고 키보드를 사용하여 애플리케이션을 탐색할 수 있도록 하십시오.
• 시간대: 날짜와 시간을 표시할 때 시간대를 염두에 두십시오. moment-timezone과 같은 라이브러리를 사용하여 시간대 변환을 처리하십시오. 예를 들어, 애플리케이션이 이벤트 시간을 표시하는 경우 사용자의 현지 시간대로 변환해야 합니다.
• 문화적 민감성: 데이터를 표시하고 사용자 인터페이스를 디자인할 때 문화적 차이를 인식하십시오. 특정 문화권에서 불쾌감을 줄 수 있는 이미지나 기호를 사용하지 마십시오. 현지 전문가와 상의하여 애플리케이션이 문화적으로 적절한지 확인하십시오.

결론

React에서 훅을 사용하여 비동기 리소스 소비를 마스터하는 것은 견고하고 성능이 뛰어난 애플리케이션을 구축하는 데 필수적입니다. useEffect와 useState의 기본 사항을 이해하고, 재사용성을 위해 커스텀 훅을 만들고, 디바운싱, 캐싱, 메모이제이션과 같은 기술로 성능을 최적화하고, 경쟁 상태를 처리함으로써 전 세계 사용자에게 훌륭한 사용자 경험을 제공하는 애플리케이션을 만들 수 있습니다. 전 세계 사용자를 위한 애플리케이션을 개발할 때는 항상 네트워크 지연 시간, 데이터 현지화, 문화적 민감성과 같은 전역적 요소를 고려하는 것을 잊지 마십시오.

추가 자료

• React useEffect 문서
• React useState 문서
• useHooks.com - 재사용 가능한 React 훅 모음
• Fetch API 문서