React의 Error boundary

devAnderson·2022년 1월 17일
0

TIL

목록 보기
28/102

Error boundary란

과거에는 컴포넌트가 마운트되는 과정에서 그 내부에 자바스크립트의 코드들이 발생하는 에러를 핸들링할 방법이 존재하지 않았다. 따라서, 일부 UI의 자바스크립트가 에러를 발생시킬 경우 전체 어플리케이션이 중단되는 불편함이 존재하였다.

물론, 모든 컴포넌트에서 에러를 잡기 위해 try{}catch{} 를 사용하는 방법이 대안이 될 수는 있다.
하지만, 그것은 비효율적일 뿐더러 명령적인 프로그래밍이기 때문에 내부 코드가 점점 지저분해지는 단점이 존재한다.

이를 특정 바운더리를 설정하여 그 바운더리 내부에서 발생하는 모든 에러를 폴백 UI로 보여주는 방법을 도입한 것이 바로 React Error boundary 이다.

How to catch error

리엑트의 생명주기 메서드 중, _static getDerivedStateFromError()와, componentDidCatch()를 이용하여 UI를 만들어낸다고 기술되어 있다.

차이 비교
getDerivedStateFromError() componentDidCatch()
해당 함수가 리턴하는 객체의 hasError 프로퍼티의 값에 따라 폴백 UI를 보여줄지 결정한다 해당 함수의 인자로 들어오는 error 객체와, error 스텍을 통해 폴백 UI에 보여질 내용을 결정한다

에러를 다루는 생명주기 함수를 가진 컴포넌트로 하위 컴포넌트를 감싸면 자식 컴포넌트가 발생시키는 에러이벤트 객체를 감지할 수 있다.

참고로, 이벤트 핸들러에 존재하는 함수 내부의 에러는 초기 랜더링 시점에서 포착될 필요가 없기 때문에 Error boundary에서 다뤄지지 않는다.(관심사의 밖이다) 만약 이벤트 핸들러의 에러 캐치가 필요하다면 try...catch 를 이용해야 한다.

refference

Error boundray

profile
자라나라 프론트엔드 개발새싹!

0개의 댓글