ErrorBoundary

TL;DR정의부수 효과를 추상화하는 방식 중 하나부수 효과를 발생시키는 연산(Effect)과 그 연산을 처리하는 핸들러(Effect Handler)로 구성코드 관리 방식코드 조각을 감싸는 맥락(context)으로 책임 분리특정 컴포넌트를 감싸는 부모 컴포넌트에게 역할 위임React에서 대수적 효과 — Suspense, ErrorBoundary로딩 UI, 에러 표시 역할을 특정 컴포넌트로 감싸는 형태로 분리자식 컴포넌트에서 발생한 부수 효과를 부모 컴포넌트에서 캐치하고 처리대수적 효과의 장점순수하지 않은 동작에 대한 책임 분리선언적(declarative) 코드 작성 가능What과 How를 분리하여 코드 가독성과 유지보수성 향상 대수적 효과란?대수적 효과는 부수 효과를 다루는 방식 중 하나로, 부수 효과를 ..

React v18 버전부터 Suspense를 공식적으로 지원한다. Suspense는 컴포넌트 렌더링에 필요한 특정 작업이 완료되지 않았음을 React에게 알려주는 매커니즘이다. 이 특정 작업은 여러가지가 있겠지만 Data Fetching 같은 비동기 작업인 경우가 가장 많다. Suspense를 이용하면, 데이터를 다 불러오지 못한 컴포넌트의 렌더링을 잠시 중단시키고 Loading 화면 같은 다른 컴포넌트를 먼저 보여주도록 할 수 있다. 💡 Suspense는 React Query, SWR 같은 Data Fetching 라이브러리와 함께 사용할 수 있도록 설계됐다. Data Fetching 라이브러리에선 옵션 인자를 전달하는 방식으로 Suspense 기능을 활성화 할 수 있다. 예를들어 useSWR에선 세..