Error Boundary란 무엇이고 어디서 어떻게 쓰여지는지 궁금해서 찾아보며 이해하는 글
Error Boundary (에러 경계)란 뭘까?
에러 경계는 컴포넌트 트리가 깨지는 대신 자식 컴포넌트 트리에서 에러를 잡아내고, 이러한 에러의 로그를 남기고, 폴백 UI를 보여주는 React 컴포넌트입니다. 에러 경계는 렌더링, 라이프사이클 메서드 및 그 아래 전체 트리 생성자에서 에러를 잡아냅니다.
출처 (리액트 공식 문서): https://reactjs-kr.firebaseapp.com/docs/error-boundaries.html#:~:text=%EC%97%90%EB%9F%AC%20%EA%B2%BD%EA%B3%84%EB%8A%94%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%20%ED%8A%B8%EB%A6%AC,%EC%97%90%EC%84%9C%20%EC%97%90%EB%9F%AC%EB%A5%BC%20%EC%9E%A1%EC%95%84%EB%83%85%EB%8B%88%EB%8B%A4.
찾아보니 이렇게 설명하고 있다.
이 에러 바운더리는 리액트에서 발생하는 자바스크립트 오류를 컴포넌트에서 안전하게 처리하며, 앱이 중단되지 않고 나머지 부분이 정상적으로 동작할 수 있도록 도와준다고 한다!
이 과정에서 사용자에게 적절한 에러 UI를 보여주는 것 :)
그렇다면, 이 Error Boundary는의 주요 특징은?
-
이 에러 바운더리는 자식 컴포넌트의 오류만 포착하여 부모 컴포넌트 또는 다른 컴포넌트들에 영향을 미치지 않는다.
-
애플리케이션의 다른 부분을 정상적으로 계속 렌더링하고 실행할 수 있게 하여 에러가 발생한 컴포넌트만 오류 UI를 보여준다.
-
componentDidCatch 메서드를 사용하여 에러를 잡은 후 디버깅이나 로깅 또한 가능하다.
주의 해야 할 점:
Error Boundary는 이벤트 핸들러(사용자의 상호작용)에서 발생한 오류를 처리하지는 않는다.
또한, 비동기 코드에서 발생한 에러도 처리하지 않는다고 한다. async 함수에서 발생한 에러는 이 에러 바운더리에 잡히지 않아서 try-catch 구문을 사용해줘야 하는 이유기도 하다.
그럼 Error Boundary는 어떤 에러를 잡을까?
위에서 Error Boundary에 대해 정의할 때도 얘기가 나왔지만, 이는 자바스크립트의 오류를 잡는다고 한다. 그럼 어떤 경우들이 있는지 확인해보자!
- 렌더링 중 오류
컴포넌트가 렌더링 될 때, JSX 탬플릿에서 발생하는 오류를 잡는다.
EX) JSX 코드 내 잘못된 변수 참조 또는 데이터가 예상과 다를 때
- 컴포넌트 업데이트 중 오류
컴포넌트가 state나 props의 변경으로 업데이트 될 때의 오류를 잡는다.
- 생명주기 메서드(lifecycle method)의 오류
componentDidMount, componentDidUpdate, getDerivedStateFromError 같은 생명주기 메서드에서 발생한 오류도 잡는다고 한다!
이 Error Boundary는 어떻게 사용하는지 확인해보자!
이 코드는 리액트 공식 문서에서 제공해주는 코드 예시이다.
React.Component를 extends하여 ErrorBoundary라는 클래스를 만들어주고, 위의 코드 예시와 같이 에러를 처리하는 로직을 넣어주면 된다.
그런 다음 이 ErrorBoundary로 원하는 컴포넌트를 감싸주면 된다.
하지만 매번 ErrorBoundary를 이렇게 정의를 해야할까?
react-error-boundary 라이브러리가 있다는 걸 알게 됐다!
라이브러리를 설치해주고, 이렇게 import를 한 다음 에러가 잡힐 수 있는 컴포넌트를 감싸주면 된다.
여기에 fallback이라는 prop이 있는데, 여기에 에러가 발생했을 때 사용자에게 보여줄 UI를 넣어주면 된다.
발생한 에러 메세지를 사용자에게 보여줄 UI에 같이 담고 싶다면, ErrorBoundary에 fallbackRender이라는 prop을 사용할 수 있다.
또는 이와 같은 기능을 하는 FallbackComponent가 있다.
이 prop들은 error와 resetErrorBoundary를 받기에 필요시에 이것들을 활용하여 UI에 보여주거나 처리 로직을 구현하면 된다 :)
여기서 궁금한 점은, fallbackRender와 FallbackComponent의 차이점이 무엇인가이다. 이 차이점을 설명해주는 글을 딱히 찾을 수 없었는데, 아시는 분 있다면 알려주세요 헣.. :)
이 외에도 이 라이브러리는 useErrorBoundary 훅, withErrorBoundary를 제공하기에 자세한 내용은 공식 문서를 참조하면 좋을 듯하다!
react-error-boundary 문서:
https://www.npmjs.com/package/react-error-boundary
이 라이브러리를 통해, 리액트 쿼리를 사용하고 있는 환경에서도 ErrorBoundary를 사용할 수 있다!
저번에 리액트의 Suspense를 사용할 때, Suspense는 에러를 핸들링하는 과정이 없기에 ErrorBoundary와 함께 사용하는 것을 권장한다 했다.
지금이 Suspense와 ErrorBoundary를 써야할 때!
이렇게 ErrorBoundary로 Suspense를 감싸준다. 그러면 Suspense는 로딩 지연 때의 UI를 보여주고, ErrorBoundary는 에러 때의 UI를 잘 보여주겠지?
이렇게 해서 Error Boundary에 대해 알아보는 시간을 가졌다.
프론트엔드를 하면서 사용자 경험이 항상 중요하기에 로딩과 에러 처리는 언제나 중요한 거 같다.
이런 처리를 할 뿐만이 아니라 어떻게 하면 로딩 시간을 단축시키고 사용자 이탈을 줄일 수 있을지 고민이 되기 시작했다!
다음 번에는 로딩 시간 단축을 위해 어떤 것을 할 수 있는 지에 대해 알아봐야겠다 :)
