ErrorBoundary 는 만능이 아니다?! 그럼 언제 ErrorBoundary 를 써야할까?

ErrorBoundary의 이해

ErrorBoundary는 리액트에서 컴포넌트의 에러를 잡아주는 역할을 해요. 만약 컴포넌트 내부에서 에러가 발생하면, 에러 바운더리는 해당 에러를 캐치하여 사용자에게 에러 메시지를 보여주거나 대체 UI를 렌더링할 수 있어요. 하지만 이 바운더리가 모든 에러를 잡을 수 있는 건 아니에요.

예를 들어, 비동기 작업에서 발생하는 에러는 ErrorBoundary가 처리하지 못해요. 왜냐하면 비동기 작업은 이벤트 루프에서 처리되고, ErrorBoundary는 자바스크립트 엔진에서 관리되는 코드에만 반응하기 때문이에요. 이 부분은 브라우저의 구조와 깊은 연관이 있어요.

브라우저는 이벤트 루프와 콜 스택을 통해 다양한 작업을 처리하는데, 비동기 로직은 이벤트 루프에서 관리돼요. 그래서 비동기 작업에서 발생한 에러는 ErrorBoundary가 감지하지 못하는 거죠. 이를 이해하면 에러 바운더리를 더 효과적으로 활용할 수 있어요.

에러 바운더리가 캐치하지 못하는 에러

그렇다면 어떤 에러들이 ErrorBoundary에 의해 캐치되지 않을까요? 가장 대표적인 예시가 비동기 작업에서 발생하는 에러입니다. 예를 들어, API 호출을 통해 데이터를 가져오는 경우, 에러가 발생하더라도 ErrorBoundary는 이를 감지하지 못해요.

비동기 작업에서 에러를 처리하려면, 해당 작업의 외부에서 에러를 던져야 해요. 즉, 비동기 함수 안에서 발생한 에러는 트라이 캐치 구문으로 잡고, 그 에러를 바깥으로 던져야만 ErrorBoundary가 이를 인식할 수 있는 거죠. 따라서, 비동기 로직의 에러 처리는 조금 더 세심하게 신경 써야 해요.

또한, 컴포넌트의 렌더링 과정에서 발생하는 에러는 ErrorBoundary가 잘 캐치해요. 예를 들어, API 문서에 따르면 데이터가 배열로 올 거라고 했는데, 실제로는 언디파인(Undefined)으로 오는 경우가 있어요. 이럴 때는 ErrorBoundary가 해당 에러를 잡아내고, 사용자에게 적절한 피드백을 줄 수 있어요.

에러 바운더리를 제대로 활용하는 팁

ErrorBoundary를 효과적으로 사용하기 위해서는 몇 가지 팁이 있어요. 첫째, ErrorBoundary를 적절한 위치에 배치하는 것이 중요해요. 컴포넌트 트리의 최상위에 배치하면 하위 컴포넌트에서 발생하는 에러를 모두 잡을 수 있어요. 하지만 너무 상위에 두면, 특정 컴포넌트의 에러가 다른 컴포넌트에 영향을 줄 수 있어요. 따라서 상황에 맞게 위치를 조절하는 것이 필요해요.

둘째, 비동기 작업에서 발생할 수 있는 에러를 사전에 예방하는 방법도 중요해요. 예를 들어, API 호출 전에 URL이 유효한지 검증하거나, 응답 데이터의 형식을 체크하는 등의 방법을 통해 에러를 줄일 수 있어요.

마지막으로, 사용자에게 에러 발생 시 적절한 피드백을 주는 것이 중요해요. 단순히 에러 메시지를 보여주는 것보다, 사용자에게 다음 행동을 유도할 수 있는 UI를 제공하면 더 좋겠죠. 예를 들어, "다시 시도하기" 버튼을 추가하는 것도 좋은 방법이에요.