React 에러 핸들링

 

React에서 에러 핸들링은 사용자 경험을 향상시키기 위해 매우 중요합니다.

특히, 애플리케이션이 크거나 복잡할수록 예상치 못한 에러가 발생할 가능성이 커지므로, 이를 적절히 처리해야 사용자에게 불필요한 불편을 줄일 수 있습니다.

 

JS Error 객체

Error: 기본적인 에러 객체

SynTaxError: 문법이 틀렸을 때 발생하는 객체

ReferenceError: 잘못된 참조를 했을 때 발생하는 객체

RangeError: 숫자 변수가 범위를 벗어났을 때 발행하는 객체

TypeError: 변수나 값의 타입이 예상과 다를 때 발생, 예를 들어, 숫자가 아닌 값에 대해 숫자 메서드를 호출할 때 발생

HTTP 에러 코드 (서버와의 통신에서 발생하는 에러)

React 애플리케이션이 API를 통해 서버와 통신할 때, HTTP 상태 코드가 중요합니다.

서버에서 반환하는 HTTP 상태 코드는 요청이 성공했는지 또는 오류가 발생했는지를 나타냅니다.

4xx 클라이언트 에러

• 400 Bad Request: 잘못된 요청입니다. 요청이 서버에 의해 이해될 수 없을 때 발생합니다.
• 401 Unauthorized: 인증되지 않은 요청입니다. 로그인 또는 인증 토큰이 필요합니다.
• 403 Forbidden: 요청이 거부되었습니다. 권한이 없는 작업을 시도할 때 발생합니다.
• 404 Not Found: 요청한 리소스를 찾을 수 없습니다.
• 429 Too Many Requests: 클라이언트가 너무 많은 요청을 보냈습니다.

5xx 서버 에러

• 500 Internal Server Error: 서버 내부에서 문제가 발생했습니다.
• 502 Bad Gateway: 서버가 잘못된 응답을 수신했습니다.
• 503 Service Unavailable: 서버가 현재 요청을 처리할 수 없습니다. 과부하 또는 유지보수 중일 수 있습니다.
• 504 Gateway Timeout: 서버가 응답하지 않아서 시간이 초과되었습니다.

에러 핸들링 방법

try, catch를 사용한 에러 핸들링

함수형 컴포넌트 내에서 특정 로직이 실패할 가능성이 있을 때, try와 catch 블록을 사용하여 에러를 핸들링할 수 있습니다.

이 방법은 주로 비동기 작업을 처리하거나, 동적으로 데이터를 가져올 때 자주 사용됩니다.

throw new Error는 JavaScript에서 에러를 강제로 발생시키는 방법입니다.

      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('네트워크 응답에 문제가 있습니다.');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      }

 

커스텀 에러 만들기

JavaScript에서는 기본적으로 제공되는 Error 객체를 확장하여 커스텀 에러를 만들 수 있습니다.

이를 통해 좀 더 명확한 에러 메시지나 특정 로직에 대한 에러 처리를 할 수 있습니다.

class CustomError extends Error {
  constructor(message, errorCode) {
    super(message);  // Error의 기본 생성자 호출
    this.name = 'CustomError';
    this.errorCode = errorCode;
  }
}

function MyComponent({ user }) {
  if (!user) {
    throw new CustomError('사용자가 존재하지 않습니다', 404);
  }

  return <div>안녕하세요, {user.name}님!</div>;
}

function App() {
  try {
    return <MyComponent user={null} />;
  } catch (error) {
    if (error instanceof CustomError) {
      return <div>에러 발생: {error.message}, 코드: {error.errorCode}</div>;
    }
    return <div>알 수 없는 에러가 발생했습니다</div>;
  }
}

export default App;

 

React에서 발생할 수 있는 일반적인 에러 코드

React에서 자주 발생하는 에러는 주로 렌더링과 관련된 문제 또는 상태 관리와 관련된 문제입니다.

 

React.Children.only expected to receive a single React element

React.Children.only 함수가 하나의 자식 요소만 받을 것으로 예상했는데, 여러 요소를 받았을 때 발생하는 에러입니다.

 

Too many re-renders

컴포넌트가 무한 루프로 리렌더링되는 경우 발생하는 에러입니다.

주로 상태 업데이트가 잘못된 로직에서 발생합니다.

 

Invalid hook call

Hook을 잘못된 방식으로 호출했을 때 발생하는 에러입니다.

예를 들어, 클래스 컴포넌트나 조건문에서 훅을 호출할 때 이 에러가 발생할 수 있습니다.