리액트 컴포넌트의 render 함수 작동 중 에러가 발생하면 해당 컴포넌트의 render 함수가 다시 작동하는데 예외처리를 어떻게 해야하나요?

Question

리액트에 대해 잘 알진 못하지만 프론트엔드 부분이 필요하여 사용하여 개발하고 있는데요.어느정도 개발이 마무리 되어서 예외처리를 해보려고 하는데, 기본적인 예외처리는 Error Boundary 라는 기능이 좋을 것 같아서 테스트 해보니 조금 이상한 점을 발견하였습니다.우선 상황은 일반 클래스 컴포넌트를 생성하여 render 함수안에서 일부러 예외를 던져 보았습니다. 그랬더니 예외가 발생한 해당 컴포넌트의 render 함수가 바로 다시 작동하는 것이였습니다.그래서 알아보니 리액트의 특성상 에러가 발생하면 해당 컴포넌트의 일관성을 유지하기 위해 리렌더링 된다고 하는데, 이미 렌더링 중 에러가 발생한 컴포넌트를 리렌더링 한다면 또다시 에러가 발생할 텐데 이런 설계를 한 이유가 무엇인가요?그리고 어찌됬든 예외처리를 위해 Error Boundary를 적용하였더니 위와 같이 2번의 예외 던짐 현상이 발생하면서 먼저 발생한 예외처리는 Error Boundary의 getDerivedStateFromError 메소드에 걸려서 처리가 되지만, 두번째 던짐 현상은 그대로 예외가 터져버렸습니다. 두개의 예외처리가 비동기적으로 처리가 되는것 같은데,, Error Boundary로 어떻게 처리를 해야하는건지 모르겠네요... 부족한 지식으로 인해 발생된 일이긴 하지만 많은 분들의 조언 부탁드립니다.. 감사합니다. 참고로 아래는 테스트한 컴포넌트의 소스입니다.App.jsimport "./App.css"; import ErrorBoundary from "./ErrorBoundary"; import ProtectedComponent from "./ProtectedComponent"; function App() { return (

); } export default App;ErrorBoundary 컴포넌트import React from "react"; export default class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { return { hasError: true }; } render() { if (this.state.hasError) { return

Something went wrong.

; } return this.props.children; } } ProtectedComponent 컴포넌트import React from "react"; class ProtectedComponent extends React.Component { render() { const ran = Math.random(); if (ran < 0.5) { throw new Error(`${ran} : 에러`); } return (

보호된 컴포넌트

); } } export default ProtectedComponent;

리액트 컴포넌트의 render 함수 작동 중 에러가 발생하면 해당 컴포넌트의 render 함수가 다시 작동하는데 예외처리를 어떻게 해야하나요?

0개의 답변

Q&A 목록