React Error Boundary로 화면 전체가 무너지는 오류 막기 빠른 답 Error Boundary는 하위 컴포넌트의 렌더링, 생명주기, 생성자에서 발생한 오류를 잡아 fallback UI로 바꾼다. 이벤트 핸들러, 서버 사이드 렌더링, 일반 비동기 콜백의 오류는 자동으로 잡지 않는다. React에서 직접 Error Boundary를 만들 때는 현재도 클래스 API인 static getDerivedStateFromError 와 componentDidCatch 를 사용한다. 데이터 요청 실패는 요청 상태가 소유하고, Error Boundary는 렌더링 실패를 격리하는 역할로 두는 편이 읽기 쉽다. 목차 흐름으로 보기 데이터 흐름과 상태 소유권 잡는 오류와 잡지 못하는 오류 현재 React 기준과 마이그레이션 포인트 기본 Error Boundary 구현 경계 배치와 리렌더링 설계 라이브러리 패턴 디버깅 출력과 로그 설계 흔한 안티패턴 흐름으로 보기 흐름 다이어그램 React는 부모에서 자식 방향으로 데이터를 내려보내며 컴포넌트를 렌더링한다. 이때 하위 컴포넌트가 렌더링 중 예외를 던지면 React는 컴포넌트 트리의 부모 방향으로 올라가며 가장 가까운 Error Boundary를 찾는다. 경계를 찾으면 해당 하위 트리를 정상 UI로 계속 유지하지 않고 fallback UI로 교체한다. 이후 componentDidCatch 에서 오류 객체와 React 컴포넌트 스택을 로깅할 수 있다. 경계가 없다면 React는 깨진 UI를 남겨두지 않기 위해 루트 UI를 제거할 수 있고, 사용자는 흔히 말하는 하얀 화면을 보게 된다. 데이터 흐름과 상태 소유권 Error Boundary를 이해할 때 먼저 나눠야 할 것은 “예상 가능한 상태”와 “렌더링이 깨진 상태”다. API 요청이 실패했거나 데이터가 아직 로딩 중인 상태는 애플리케이션의 정상적인 데이터 흐름 안에 있다. 이 상태는 데이터를 요청한 컴포넌트나 데이터 패칭 계층이 소유하는 편이 자연스럽다...