ErrorBoundary 란 뭘까 1
우리는 개발을 하면서 많은 오류를 맞딱트린다.
들어와야 할 데이터가 안들어 온다던가, 상태관리를 잘못해서 잘못된 값을 가져온다던가.. 무한으로 즐긴다던가 등등등
상상하지도 못한 이유로 오류가 발생하기도 한다.
하지만 우리는 훌륭한 프론트엔드 개발자가 되려면 이런 오류 상황도 사용자에게 적절한 방법으로 알리고,
오류가 발생한 부분 외의 화면은 정상적으로 작동하게 해야 보다 나은 UX 를 제공할 수 있다.
오류 처리의 방법들
오류가 발생하였을때 오류에 따라 우리는 적당한 문구와 방법으로 해당 상태를 사용자에게 알려야 한다.
사용자가 모달을 open 하는 버튼을 눌렀다고 치자.
이때 모달은 안열리고 오류 메시지에 런타임 오류 코드들이 잔뜩 표출된다던가,..
혹은 아무 오류도 안보여줘서 버튼을 눌렀는데 아무 동작을 안한다던가 하면 매우 난감한 것이다.
이럴때 적당한 방법은, ~~ 가 없습니다. 다시 시도해주세요 라던가 관리자에게 문의해주세요 와 같은
문구를 표현해주고, 해당 오류를 해결할 만한 다음 처리를 해주는 것이다.
react 에는 이걸 편하게 해주는 도구가 있었으니...
Error Boundary
Error Boundary 는 리엑트의 lifeCycle 과정중 렌더링, 컴포넌트 생성(생성자), 라이프사이클 메서드 실행 에서 발생하는 오류를 탐지하여,
적절한 UI 를 표출하거나 후처리를 할 수 있도록 도와준다.
아주아주 쉽게 설명해 보겠다.
우리의 앱을 연극이라고 생각하고 각 컴포넌트들을 배우라고 생각해보자
우리는 무대에서 배우들이 실수를 해도 이 연극이 완전 망했다고 느끼지 않도록 연출가가 몇가지 플랜 B 를 준비해놨다.
만약에 배우가 실수를 하면 우스꽝스러운 음악이 나오며 "라고 할뻔!" 이라고 하거나, 조명을 다 껐다가 켜서 "어 무슨일 있었나?" 라는식으로
여기서 이 연출가가 바로 Error Boundary 다.
이 연출가(Error Boundary) 는 공연(렌더링) 중 배우(컴포넌트) 가 실수(오류) 를 할 경우
해당 실수를 감지하고 상황에 맞는 플랜B(에러 UI 렌더링) 를 해준다.
이렇게 하면 다음 연극도 매끄럽게 진행할 수 있고 그렇게 실수라고 느끼지 않게 할 수 있을꺼다.
자세히 알아보기
위 설명처럼 Error Boundary 쉽게 알아봤다면 어떻게 에러를 판단하는지가 궁금해질꺼다.
Error Boundary 가 동작하는 원리를 자세히 파보자
위에서 말했듯이 Error Boundary 는 react 의 생명주기 과정에서 발생하는 오류를 감지하는데,
이는 try-catch 메커니즘을 기반으로 이루어진다.
우선 react 가 어떻게 렌더링 되는지 순서에따라 알아보자
- render 호출 : 컴포넌트가 JSX 를 반환.
- DOM 업데이트 : react 가 가상돔을 업데이트 하고 실제 돔에 반영
- 라이프사이클 메서드 호출 : didMount 나 didUpdate 등의 라이프사이클 메서드 실행.
이 과정에서 예외가 발생하면 react 는 try catch 를 사용해서 오류를 포착하게 된다.
오류를 포착한 react 는 오류가 발생한 컴포넌트 트리에서 가장 가까운 Error Boundary 를 찾는다.
Error Boundary 를 찾는다면 해당 Error Boundary 에 맞는 대체 UI 와 추가 로깅을 처리해준다.
다음시간에는 실제 예제와 Error Boundary 로 탐지할 수 없는 오류 종류에 대해서 알아보자
