Question 1

React의 Error Boundary와 Suspense를 설명해주세요.

Accepted Answer

둘 다 **컴포넌트 트리의 특정 지점에서 예외 상황을 선언적으로 처리**하는 장치인데, 다루는 대상이 다릅니다.

### **Error Boundary**

자식 컴포넌트의 **렌더링 중 에러를 잡아서** 앱 전체가 죽는 대신 **폴백 UI를 보여주는** 컴포넌트입니다.

에러를 잡는 두 생명주기(`getDerivedStateFromError`, `componentDidCatch`)가 클래스에만 있어서 **아직 클래스 컴포넌트로만 만들 수 있습니다.** 실무에서는 `react-error-boundary` 라이브러리를 쓰는 것이 일반적입니다.

주의할 점은 **잡지 못하는 에러**가 있다는 것입니다 — 이벤트 핸들러, setTimeout 같은 비동기 코드, SSR 중 에러는 잡지 못합니다. 렌더링 경로의 에러만 잡습니다.

### **Suspense**

자식의 **비동기 작업이 끝날 때까지 폴백 UI를 보여주는** 내장 컴포넌트입니다. `React.lazy`를 통한 코드 스플리팅,

Question 2

Context API의 성능 문제와 해결 전략을 설명해주세요.

Accepted Answer

Context는 전역 값을 트리 아래로 전달하는 도구인데, **값이 바뀌면 그 Context를 구독하는 모든 컴포넌트가 리렌더**됩니다. 이게 성능 문제의 근원입니다.

### **문제가 생기는 전형적인 형태**

user와 theme을 **하나의 Context에 객체로 묶어서** 내려주면, user만 바뀌어도 theme만 쓰는 컴포넌트까지 전부 리렌더됩니다. 게다가 Provider의 value에 매 렌더 새 객체를 만들어 넘기면, 부모가 리렌더될 때마다 값이 "바뀐 것"으로 취급됩니다.

### **해결 전략**

- **Context 분리** — 변경 주기가 다른 값(user와 theme)은 각각의 Context로 나눕니다. 자기가 쓰는 값이 바뀔 때만 리렌더됩니다.
- **값과 업데이터 분리** — 읽기용 Context와 dispatch용 Context를 나누면, 값만 읽는 컴포넌트는 업데이터 참조 변경에 영향받지 않습니다.
- **value를 useMemo로 안정화** — P

Question 3

Compound Components 패턴을 설명하고 구현 예시를 보여주세요.

Accepted Answer

Compound Components는 **여러 컴포넌트가 암묵적으로 상태를 공유하면서 하나의 UI 단위를 구성**하는 패턴입니다. HTML의 `select`와 `option`처럼, 부모와 자식이 세트로 동작하는 관계를 React로 표현한 것입니다.

### **어떤 모양인가**

셀렉트 박스를 예로 들면, `Select`가 최상위에 있고 그 아래 `Select.Trigger`, `Select.Options`, `Select.Option`을 사용자가 **원하는 구조로 직접 배치**합니다. 열림 상태나 선택값 같은 내부 상태는 부모가 갖고, 자식들은 그것을 암묵적으로 공유받습니다.

### **어떻게 구현하는가**

핵심은 **Context**입니다.

- 부모 컴포넌트가 상태(열림 여부, 선택값, 변경 함수)를 만들어 Context Provider로 감쌉니다.
- 각 서브 컴포넌트는 `useContext`로 그 상태를 꺼내 씁니다 — Trigger는 열림 토글, Option은 선택 처

Question 4

React에서 접근성(a11y)을 구현하는 핵심 전략은?

Accepted Answer

웹 접근성은 스크린 리더 사용자, 키보드만 쓰는 사용자를 포함한 **모든 사용자가 동등하게 서비스를 쓸 수 있게 하는 것**입니다. React에서의 핵심 전략은 다음과 같습니다.

### **1. 시맨틱 HTML 우선**

`div`에 onClick을 붙이는 대신 `button`, `a`, `input` 같은 **네이티브 요소**를 씁니다. 키보드 포커스, Enter/Space 동작, 스크린 리더 인식이 공짜로 따라옵니다. ARIA를 붙이기 전에 맞는 태그가 있는지 먼저 찾는 것이 원칙입니다.

### **2. 포커스 관리**

SPA는 화면이 바뀌어도 브라우저가 포커스를 옮겨주지 않으므로 직접 관리해야 합니다.

- 모달이 열리면 포커스를 모달 안으로 이동시키고, 닫히면 원래 위치로 되돌립니다.
- 모달이 열려 있는 동안 포커스가 바깥으로 나가지 않게 **focus trap**을 적용합니다.
- Escape로 닫기 같은 키보드 인터랙션을 지원합니다.

### **3. ARIA 속성

Question 5

React 18의 Automatic Batching과 flushSync를 설명해주세요.

Accepted Answer

### **Automatic Batching**

배칭은 **여러 상태 업데이트를 모아 한 번의 리렌더링으로 처리**하는 것입니다.

React 17까지는 **React 이벤트 핸들러 안에서만** 배칭이 됐습니다. setTimeout, Promise 후속 처리, 네이티브 이벤트 안에서 상태를 두 번 바꾸면 리렌더도 두 번 일어났습니다.

React 18부터는 `createRoot` 기준으로 **어디서 업데이트하든 자동으로 배칭**됩니다. API 응답을 받아 데이터와 로딩 상태를 연달아 바꿔도 리렌더는 한 번입니다. 코드 변경 없이 리렌더 횟수가 줄어드는, 18의 대표적인 기본 개선입니다.

### **flushSync**

반대로 **배칭을 강제로 끊고 상태 변경을 즉시 DOM에 반영**해야 할 때 쓰는 탈출구입니다. `react-dom`에서 제공합니다.

필요한 경우는 제한적입니다.

- 상태 변경 **직후의 DOM을 측정**해야 할 때 — 새 항목을 추가하자마자 그 위치로 스크롤

Question 6

리액트 18 버전에 도입된 동시성 기능을 설명할 수 있나요?

Accepted Answer

React 18의 동시성(Concurrency)은 **렌더링을 중단·재개·폐기할 수 있게 만든 렌더러의 근본적인 변화**입니다. 여러 작업을 물리적으로 동시에 실행하는 것이 아니라(JS는 여전히 싱글 스레드), **렌더링에 우선순위를 두고 급한 일이 오면 하던 렌더를 양보**하는 방식입니다.

### **이전과 무엇이 다른가**

기존(Legacy) 모드에서 렌더링은 한번 시작하면 끝까지 **중단할 수 없었습니다.** 큰 트리를 렌더하는 동안 사용자 입력이 밀렸습니다. Concurrent 모드에서는 렌더 도중 더 급한 업데이트가 들어오면 **진행 중인 작업을 버리고 급한 것부터** 처리합니다.

### **핵심 기능**

- **useTransition** — 상태 업데이트를 감싸 "급하지 않다"고 표시합니다. 무거운 목록 갱신 때문에 입력이 버벅이는 문제를 해결하고, isPending으로 지연 상태를 표시할 수 있습니다.
- **useDeferredValue** — 값의 지연된 사

React

11React의 Error Boundary와 Suspense를 설명해주세요.보통에러 처리

12Context API의 성능 문제와 해결 전략을 설명해주세요.보통상태관리

13Compound Components 패턴을 설명하고 구현 예시를 보여주세요.어려움패턴

14React에서 접근성(a11y)을 구현하는 핵심 전략은?보통접근성

15React 18의 Automatic Batching과 flushSync를 설명해주세요.보통렌더링

16리액트 18 버전에 도입된 동시성 기능을 설명할 수 있나요?어려움렌더링