# 179 [udemy React 완벽 가이드 노트] 클래스 기반 컴포넌트를 써야할 때 : Error Boundaries (try-catch 문)

Error Boundaries 

 

어떤 오류는 예방할 수 없으며 

어떤 오류는 어플리케이션의 어떤 부분에서 다른 부분으로 

무언가가 잘못됐다고 전달할 때 사용되기도 한다.

 

 

 

예를 들어 HTTP요청을 보냈는데 서버가 일시적으로 응답이 없을 경우, 

그 요청에 대해 응답할 수 없고 어플리케이션에서 오류가 발생하게 될 것이다. 

 

 

componentDidUpdate() {
    if (this.props.users.length === 0) {
      throw new Error("No users provided!");
    }
  }

 throw new Error코드는 콜스택에서 오류를 발생시키는 코드다. 

오류 처리가 되지 않으면 전체 애플리케이션이 강제 중단 되어 버린다. 

 

 

 

 

 try-catch 문

---

 

일반적인 자바스크립트 문에서는 try-catch 문을 사용한다. 

  componentDidUpdate() {
    try {
      someCodeWhichMightFail()
    } catch (err) {
      
    }

 

오류를 catch해 대체 코드를 실행하는 것. 

 

그런데 이것은 오류가 발생한 컴포넌트 안에서 해결하지 않고

부모 컴포넌트에서 처리하고 싶다면 

try-catch문은 사용할 수 없다. 

 

이것은 정규 자바스크립트문을 사용하는 곳에서만 쓸 수 있기 때문이다. 

jsx코드를 통해 연결되는 리액트에서는 사용할 수 없다. 

 

 

 

처리하기 위해서는

Error boundary를 만들자 

---

그 안에는 componentDidCatch 넣는다. 

class ErrorBoundary extends Component {
  componentDidCatch() {
    
  }
  render() {
     return this.props.children;
  }
}

 

두 개의 함수형 컴포넌트를 추가할 수 없으며 

같은 역할을 하는 함수형 컴포넌트에서의 기능은 지금까지는 없다. 

 

class여야 하고, 그 안에는 componentDidCatch를 사용해야 한다. 

이 메서드는 자식 컴포넌트 중 하나가 오류를 발생시키거나 전달할 때 발동된다. 

 

 

ErrorBoundary에서도 그랬듯이 render를 하고 this.props.children을 return 한다. 

ErrorBoundary컴포넌트로 보호되어야 하는 컴포넌트를 둘러싸야 하기 때문이다. 

 

 

UserFinder.js파일에서 

<ErrorBoundary>
    <Users users={this.state.filteredUsers} />
</ErrorBoundary>

이런 식으로 말이다. 

 

오류가 발생할 가능성이 있는 컴포넌트를 

위와같이 감싸면 된다.

 

여러 컴포넌트를 한 번에 감쌀 수도 있다. 

 

 

 

 

Error boundary 에서 error가 발생했을 때 처리할 코드 추가 작성

---

class ErrorBoundary extends Component {
  componentDidCatch(error) {}

 

오류가 발생했을 때 조치가 필요하기 때문에 

매개변수로 error 객체를 받아온다. 

이는 리액트가 자동으로 보내줄 것이다. 

 

 

오류를 확인해 무엇이 문제인지 확인하고

개별 오류마다 서로 다른 로직을 실행하게 한다. 

각 오류마다 개별 오류 경계가 필요하다. 

 

 

class ErrorBoundary extends Component {
  constructor() {
    super();
    this.state = {hasError: false}
  }

constructor를 추가하고 그 안에 super생성자를 추가하고  

error의 초기 상태를 false로 설정해 놓는다. 

이름은 어떻든 상관없다. 

 

 

 

그리고 error를 캐치할 때 hasError: true로 state를 설정한다. 

  componentDidCatch(error) {
    this.setState = { hasError: true };
  }

 

 

hasError가 true일 때 

Something went wrong! 이란 문구가 보이도록 해준다. 

  render() {
    if (this.state.hasError) {
      return <p>Something went wrong!</p>
    }

 

 

ErrorBoundary 사용 이유는 무언가가 잘못되더라도 

어플리케이션 전체가 작동중단되지 않고 오류를 확인한 뒤에 

자바스크립트의 try-catch문과 같이 

처리할 수 있게 된다. 

 

 

함수형 컴포넌트에서는 사용할 수 없다.