TIL/React

TIL/React

Errorboundary (feat. reat-error-boundary)

들어가기React 애플리케이션에서 예기치 못한 에러는 애플리케이션의 안정성을 해치고 사용자 경험을 저하시킬 수 있습니다. 이러한 에러들을 효과적으로 처리하고 관리하기 위해 React는 ErrorBoundary라는 컴포넌트를 사용할 수 있습니다.Error Boundary란 에러에 대한 경계를 의미합니다. 즉, 특정 `Error Boundary`로 감싸여진 구간에서 에러가 발생하면 그 에러를 잡아내서 처리할 수 있습니다. 선언적으로 에러를 처리할 수 있는 ErrorBoundary 컴포넌트는 크게 두 가지 방식으로 구현할 수 있습니다Class Component로 선언해서 사용하는 법라이브러리를 통해 Function Component로 사용하는 법 1. Class Component로 ErrorBoundary 구..

TIL/React

Errorboundary 야무지게 사용하기

내가 사용했던 방식의 문제점: 기존의 에러바운더리 적용 방식은 Global ErrorBoundary 라고 명명할 수 있을 것처럼 전체를 감싸는 에러바운더리를 작성해서, 잘못된 페이지를 접속했거나, 요청이 잘못되었을 때 등 발생하는 에러를 모두 한꺼번에 처리해서 상황에 따른 핸들링을 하지 않는 방식으로 사용했습니다. 이렇게 사용한 에러바운더리는 다음과 같은 유저의 불편함을 만들었습니다. 📍 Global ErrorBoundary / API ErrorBoundary 나누기 기존의 errorBoundary를 GlobalErrorBoundary로 설정하고 전체를 감쌉니다. 내부의 api 관련 에러들을 핸들링 하기위해 지역적인 errorBoundary인 ApiErrorBoundary를 생성하고, ApiErrorBo..

TIL/React

리액트 Hooks: useCallback 훅의 역할

보호되어 있는 글입니다.

nana$i
'TIL/React' 카테고리의 글 목록