React에서 HTTP 상태 코드 이해하기

 

React 애플리케이션은 API와 통신하는 경우가 많습니다. 이때 HTTP 상태 코드를 올바르게 이해하고 처리하는 것은 애플리케이션의 신뢰성과 사용자 경험을 향상시키는 데 중요합니다. 이 글에서는 HTTP 상태 코드의 개념을 소개하고, React에서 이를 효과적으로 처리하는 방법을 설명합니다.

---

HTTP 상태 코드란?

HTTP 상태 코드는 클라이언트와 서버 간의 요청/응답 상호작용에서 발생하는 상태를 나타내는 3자리 숫자입니다. 이 코드는 서버가 클라이언트 요청을 어떻게 처리했는지에 대한 정보를 제공합니다. 상태 코드는 다음과 같은 5개의 범주로 나뉩니다:

1. 1xx (정보): 요청이 수신되었고 처리가 계속되고 있음을 나타냅니다.
2. 2xx (성공): 요청이 성공적으로 처리되었음을 나타냅니다.
3. 3xx (리다이렉션): 요청이 다른 리소스를 참조하거나 이동해야 함을 나타냅니다.
4. 4xx (클라이언트 오류): 클라이언트 요청에 오류가 있음을 나타냅니다.
5. 5xx (서버 오류): 서버가 요청을 처리하는 데 실패했음을 나타냅니다.

---

React에서 HTTP 상태 코드 사용하기

React에서 HTTP 상태 코드를 처리하려면 보통 fetch나 axios와 같은 HTTP 클라이언트를 사용합니다. 아래에서는 React에서 HTTP 상태 코드를 처리하는 기본적인 방법과 함께, 각 범주에 따른 실제 사례를 소개합니다.

1. 상태 코드 범주별 처리 예제

2xx: 성공적인 응답 처리

import React, { useEffect, useState } from 'react';

const SuccessExample = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP 상태 코드: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('오류 발생:', error);
        setLoading(false);
      });
  }, []);

  if (loading) return

로딩 중...

;
  return

{data &&

{data.title}

}

;
};

export default SuccessExample;

위 예제는 fetch를 사용하여 2xx 상태 코드를 처리하고, 성공적으로 데이터를 가져옵니다.

4xx: 클라이언트 오류 처리

클라이언트 오류는 잘못된 요청으로 인해 발생합니다. React에서 이를 처리하는 예는 다음과 같습니다:

import React, { useEffect, useState } from 'react';

const ClientErrorExample = () => {
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
      .then((response) => {
        if (!response.ok) {
          if (response.status === 404) {
            throw new Error('리소스를 찾을 수 없습니다.');
          }
          throw new Error(`HTTP 상태 코드: ${response.status}`);
        }
        return response.json();
      })
      .catch((error) => {
        setError(error.message);
      });
  }, []);

  return

{error ?

{error}

:

로딩 중...

}

;
};

export default ClientErrorExample;

404 상태 코드가 발생하면 사용자에게 적절한 오류 메시지를 표시합니다.

5xx: 서버 오류 처리

서버 오류는 클라이언트가 정상적으로 요청했지만 서버가 이를 처리하지 못했을 때 발생합니다.

import React, { useEffect, useState } from 'react';

const ServerErrorExample = () => {
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/server-error')
      .then((response) => {
        if (!response.ok) {
          if (response.status >= 500) {
            throw new Error('서버에 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
          }
        }
        return response.json();
      })
      .catch((error) => {
        setError(error.message);
      });
  }, []);

  return

{error ?

{error}

:

로딩 중...

}

;
};

export default ServerErrorExample;

서버에서 발생한 문제에 대해 사용자에게 친절한 메시지를 전달합니다.

---

2. Axios를 사용한 HTTP 상태 코드 처리

axios는 HTTP 요청 처리를 간단하게 해주는 라이브러리입니다. 이를 사용하여 상태 코드를 처리하는 방법은 다음과 같습니다:

import axios from 'axios';
import React, { useEffect, useState } from 'react';

const AxiosExample = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        if (error.response) {
          setError(`HTTP 상태 코드: ${error.response.status}`);
        } else {
          setError('알 수 없는 오류가 발생했습니다.');
        }
      });
  }, []);

  return (

{error ?

{error}

:

{data ? data.title : '로딩 중...'}

}

  );
};

export default AxiosExample;

---

모범 사례

React에서 HTTP 상태 코드를 처리할 때 다음 모범 사례를 따르는 것이 좋습니다:

1. 에러 메시지 사용자 정의: 사용자에게 적합한 메시지를 제공하여 혼란을 줄입니다.
2. 로깅과 알림: 개발 환경에서는 상태 코드와 오류 메시지를 로깅하고, 운영 환경에서는 적절한 알림을 설정합니다.
3. 재시도 로직: 네트워크 문제로 인한 실패 시 재시도를 고려합니다.
4. 상태 관리 라이브러리 사용: Redux 또는 React Query를 활용해 상태와 HTTP 요청을 효율적으로 관리합니다.

---

결론

HTTP 상태 코드는 클라이언트와 서버 간의 상호작용 상태를 이해하는 데 중요한 역할을 합니다. React 애플리케이션에서 이를 적절히 처리하면 안정성과 사용자 경험을 크게 개선할 수 있습니다. 위에서 다룬 예제를 기반으로 여러분의 프로젝트에 적합한 HTTP 상태 코드 처리를 구현해보세요!