로딩 상태와 에러 처리

비동기 데이터 가져오기 과정에서 로딩 상태 관리와 에러 처리는 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

이 절에서는 React 애플리케이션에서 이러한 상황을 효과적으로 다루는 방법을 살펴보겠습니다.

로딩 상태 관리

로딩 상태를 관리하는 가장 기본적인 방법은 state를 사용하는 것입니다.

import React, { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        setLoading(false);
      }
    }
 
    fetchUser();
  }, [userId]);
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

이 예제에서는 loading 상태를 사용하여 데이터 가져오기 진행 중임을 표시합니다.

데이터 요청이 시작될 때 loading을 true로 설정하고, 요청이 완료되면 false로 설정합니다.

로딩 인디케이터 구현

사용자에게 더 나은 시각적 피드백을 제공하기 위해 커스텀 로딩 인디케이터를 구현할 수 있습니다.

function LoadingSpinner() {
  return (
    <div className="spinner">
      <div className="bounce1"></div>
      <div className="bounce2"></div>
      <div className="bounce3"></div>
    </div>
  );
}
 
function UserProfile({ userId }) {
  // ... 이전 코드와 동일 ...
 
  if (loading) {
    return <LoadingSpinner />;
  }
 
  // ... 나머지 코드 ...
}

이 LoadingSpinner 컴포넌트는 CSS 애니메이션을 사용하여 동적인 로딩 표시를 제공할 수 있습니다.

에러 처리

에러 처리는 try-catch 문을 사용하여 구현할 수 있습니다.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('Failed to fetch user data');
        }
        const data = await response.json();
        setUser(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    }
 
    fetchUser();
  }, [userId]);
 
  if (loading) {
    return <LoadingSpinner />;
  }
 
  if (error) {
    return <div>Error: {error}</div>;
  }
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

이 예제에서는 에러가 발생하면 error 상태를 설정하고, 이를 사용자에게 표시합니다.

네트워크 에러 처리

네트워크 에러와 같은 특정 에러 상황에 대해 더 구체적인 처리를 할 수 있습니다.

async function fetchUser() {
  setLoading(true);
  setError(null);
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('User not found');
      } else {
        throw new Error('An error occurred while fetching the user');
      }
    }
    const data = await response.json();
    setUser(data);
  } catch (error) {
    if (error instanceof TypeError && error.message === 'Failed to fetch') {
      setError('Network error. Please check your internet connection.');
    } else {
      setError(error.message);
    }
  } finally {
    setLoading(false);
  }
}

이 예제에서는 서버 응답 상태 코드와 네트워크 오류를 구분하여 처리합니다.

에러 경계(Error Boundaries) 구현

컴포넌트 트리 전체에 대한 에러 처리를 위해 에러 경계 컴포넌트를 구현할 수 있습니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    console.log('Error caught by ErrorBoundary:', error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
 
    return this.props.children;
  }
}
 
function App() {
  return (
    <ErrorBoundary>
      <UserProfile userId={1} />
    </ErrorBoundary>
  );
}

에러 경계는 하위 컴포넌트 트리에서 발생하는 JavaScript 에러를 포착하고, 대체 UI를 표시합니다.

재시도 메커니즘 구현

일시적인 네트워크 문제를 해결하기 위해 재시도 메커니즘을 구현할 수 있습니다.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  async function fetchUserWithRetry(retries = 3) {
    setLoading(true);
    setError(null);
    for (let i = 0; i < retries; i++) {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('Failed to fetch user data');
        }
        const data = await response.json();
        setUser(data);
        return;
      } catch (error) {
        console.log(`Attempt ${i + 1} failed. Retrying...`);
        if (i === retries - 1) {
          setError('Failed to fetch user after multiple attempts');
        }
      }
    }
    setLoading(false);
  }
 
  useEffect(() => {
    fetchUserWithRetry();
  }, [userId]);
 
  if (loading) return <LoadingSpinner />;
  if (error) return <div>Error: {error}</div>;
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

이 예제에서는 데이터 가져오기에 실패할 경우 지정된 횟수만큼 재시도합니다.

로딩 상태 관리와 에러 처리는 견고한 React 애플리케이션을 구축하는 데 필수적입니다.

적절한 로딩 인디케이터를 사용하면 사용자에게 작업이 진행 중임을 알려줄 수 있고, 체계적인 에러 처리를 통해 문제가 발생했을 때 사용자에게 명확한 피드백을 제공할 수 있습니다.

다양한 에러 상황(네트워크 오류, 서버 오류, 데이터 형식 오류 등)에 대비하고, 각 상황에 맞는 적절한 메시지를 표시하는 것이 중요합니다.

또한, 에러 경계를 사용하여 예상치 못한 에러로부터 애플리케이션을 보호하고, 가능한 경우 재시도 메커니즘을 구현하여 일시적인 문제를 해결할 수 있습니다.

이러한 기법들을 적절히 조합하여 사용하면, 더 안정적이고 사용자 친화적인 React 애플리케이션을 개발할 수 있습니다.

이전으로 다음으로