React - 예외 처리

게시 2025/07/05

By Junhyuk Son 6 분읽는 시간

예외 처리

예외 처리란

프로그램의 실행 중 오류가 발생 되었을 때, 오류를 그대로 실행시키지 않고 오류에 대응하는 것

필요성

예외 처리를 통하여, 프로그램의 비정상 종료를 막을 수 있다
프로그램 개발 중, 문제가 발생 할 경우 이를 해결하는데 필요한 시간을 줄일 수 있다

종류

Error Boundary

특징

React 16부터 도입된 새로운 방식의 예외 처리 방식
선언적으로 에러를 관리하기 위한 목적을 가지고 있음
하위 컴포넌트에서 발생한 오류를 처리 할 수 있는 컴포넌트
- 자식 컴포넌트에서 에러가 발생되면, 상위 컴포넌트에서 오류를 기록함
- 오류가 발생할 경우, 오류가 발생한 컴포넌트 대신 Fallback UI¹를 보여줌
- render/useEffect에서 발생한 오류를 처리 가능함
이벤트 핸들러, Hook에서 사용이 불가능함
- 단, useErrorBoundary를 이용하여 Error Boundary가 처리하지 못하는 에러를 전달 가능함

메소드

static getDeriedStateFromError(): 오류에 대한 응답으로 상태를 업데이트 및 유저에게 오류 메시지를 표시하는 기능으로 사용됨
componentDidCatch(): 서비스에 대한 오류를 기록함
- catch{}문과 유사하게 작동하지만, 컴포넌트에서만 작동된다

사용 불가능한 상황

이벤트 핸들러
비동기 코드
서버 사이드 렌더링
Error Boundary 자체에서 발생하는 에러

사용 방법

  
//정의할 서브 클래스
class ErrorBoundary extends React.Component {
   constructor(props) {
           super(props);
           this.state = {hasError: false };
       }
   
	static getDerivedStateFromError(error) {
    	//다음 렌더링에서 Fallback UI가 보이도록 상태를 업데이트
        return {hasError : true};
	}

	componentDidCatch(error, errorInfo){
    	//에러 리포팅 서비스에 에러를 기록 가능
        logErrorToMyService(error, errorInfo);
	}

	render() {
    //Fallback UI를 커스텀 해서, 렌더링 가능
        return <> Fallback UI 구성 </>
  }
}


//메인 컴포넌트
<ErrorBoundary>
    	/*처리할 내용*/
</ErrorBoundary>

Error Boundary를 사용하기 위해서는, 위의 코드와 같이 서브 클래스에 Error Boundary를 정의해야 함
- 이후, 정의한 서브 클래스로 감싸서 사용 가능함

Throw

고의적으로 예외를 발생시켜, 예외를 처리시키는 역할을 가지고 있음

사용 방법

예시 코드

  
export default function App() {
        const obj = undefined;
    
const errorEvent = () => {
        try {
      throw new Error("예외가 발생했습니다!");
    } 
        catch (error) {
      console.log(error);
    }
}
    
  return(
      <>
                <button onClick={errorEvent}>예외 처리 버튼</button>
      </>
  )
}



---------------------------------------------------
//출력
"Error: 예외가 발생했습니다"   

try-catch

사용 방법

  
try{
	//실행할 코드
}
catch(예외변수 이름)
{
	//예외 처리 코드
}
finally { //선택
	//종료 후 실행할 코드
}

try

실행할 코드

catch

try 블록으로 예외가 발생할 경우 처리하는 역할을 가지고 있음
오류 종류에 따라서 무시/개별 처리가 가능하다

finally

try 블록이 종료되면 실행되는 부분
try 블록과 관계없이, 실행이 종료되면 무조건 실행된다

예시 코드

  
export default function App() {
        const obj = undefined;
    
const errorEvent = () => {
    try{
        console.log(obj.name)
    }
    catch(error){
        console.log('오류발생 : ' + error);
    }
    finally{
        console.log('수행 완료');
    }
}
    
  return(
      <>
         <button onClick={errorEvent}>예외 처리 버튼</button>
      </>
  )
}


---------------------------------------------------
//출력
"오류발생 : TypeError: Cannot read properties of undefined (reading 'name')"
"수행 완료"

Promise에서의 try-catch 예외 처리

  
try {
	const response = await fetch('address');
	}
	catch(error)
    {
       console.log(error);
    }

promise²객체의 경우에는 위의 코드와 같이 await를 사용하지 않은 경우, catch로 예외를 처리 할 수 없음

참고한 자료

보조 UI로, 메인 UI가 작동하지 않을 때, 대체 기능을 제공하는 UI이다 ↩
Promise에 대한 내용은 링크를 참고 바란다 ↩

React 공부

React

예외 처리

예외 처리란

필요성

종류

Error Boundary

특징

메소드

사용 불가능한 상황

Throw

try-catch

try

catch

finally

Promise에서의 try-catch 예외 처리

인기 태그