React의 Error boundary

• 에러 바운더리(Error boundary)는 리액트에서 컴포넌트가 마운트되는 과정에서 발생하는 자바스크립트 에러를 핸들링하는 방법으로, 특정 바운더리 내에서 발생하는 모든 에러를 폴백 UI로 보여주는 기능을 한다.

• 에러 바운더리는 리액트의 생명주기 메서드인 getDerivedStateFromError()와 componentDidCatch()를 이용하여 구현된다. 전자는 에러 발생 여부에 따라 폴백 UI를 보여줄지 결정하고, 후자는 에러 객체와 에러 스택을 통해 폴백 UI에 보여질 내용을 결정한다.

• 에러 바운더리를 이용하면, 에러를 다루는 생명주기 함수를 가진 컴포넌트로 하위 컴포넌트를 감싸서 자식 컴포넌트가 발생시키는 에러를 감지하고 처리할 수 있다.

• 단, 이벤트 핸들러 내부의 에러는 초기 랜더링 시점에서 포착되지 않으므로 에러 바운더리에서 처리되지 않는다. 이 경우에는 try...catch를 이용하여 에러를 캐치해야 한다.