Question 1

React에서 Error Boundary란 무엇인가요?

Accepted Answer

Error Boundary는 자식 컴포넌트 트리에서 발생하는 JavaScript 에러를 잡아내고, 폴백 UI를 표시하며, 전체 애플리케이션의 크래시를 방지하는 React 클래스 컴포넌트입니다. componentDidCatch()와 getDerivedStateFromError() 메서드를 사용하여 렌더링 에러를 가로채고 처리합니다.

Question 2

React에서 기존의 try/catch 대신 Error Boundaries를 사용하는 이유는?

Accepted Answer

try/catch 블록은 React 컴포넌트 렌더링 중에 발생하는 에러를 잡을 수 없습니다. 이러한 에러들은 트리를 통해 비동기적으로 전파되기 때문입니다. Error Boundaries는 자식 컴포넌트의 렌더링 에러, 라이프사이클 에러, 생성자 에러를 인터셉트하기 위해 특별히 설계되었으며, try/catch는 동기식 명령형 코드에서만 작동합니다.

Question 3

Error Boundary에서 에러를 캡처하는 라이프사이클 메서드는 무엇인가요?

Accepted Answer

componentDidCatch(error, info)는 Error Boundary가 에러를 잡은 후에 호출되는 라이프사이클 메서드입니다. 에러와 componentStack이 포함된 info 객체를 받아 에러 로깅이나 사이드 이펙트 액션을 수행할 수 있습니다. getDerivedStateFromError()도 사용되지만, state 업데이트와 폴백 UI 표시를 위한 것입니다.

Error Boundaries & 에러 핸들링

React에서 Error Boundary란 무엇인가요?

답변

React에서 기존의 try/catch 대신 Error Boundaries를 사용하는 이유는?

답변

Error Boundary에서 에러를 캡처하는 라이프사이클 메서드는 무엇인가요?

답변

Error Boundary에서 getDerivedStateFromError()의 역할은 무엇인가요?

getDerivedStateFromError()와 componentDidCatch()의 차이점은 무엇인가요?

기타 React / Next.js 면접 주제

JavaScript 기초

React 기초

React Hooks

컴포넌트 라이프사이클

React Router

Context를 활용한 상태 관리

폼과 Controlled Components

데이터 가져오기 및 API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js 기초

TypeScript와 React

Next.js 데이터 페칭

Next.js Server Actions

Next.js 라우팅 및 내비게이션

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware 및 Auth

React 테스트

Zustand State Management

React 성능 최적화

Advanced React Patterns

Next.js 고급 기능

Next.js 배포 및 프로덕션

아키텍처 & 디자인 패턴

React Server Components

Next.js 국제화

React 보안 & 모범 사례

다음 면접을 위해 React / Next.js을 마스터하세요