Question 1

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

Accepted Answer

Context는 전역 상태를 제공하지만 **모든 소비자(consumer)를 리렌더**시키는 문제가 있습니다. **문제:** ```jsx const AppContext = createContext(); function App() { const [user, setUser] = useState(null); const [theme, setTheme] = useState('light'); // user만 바뀌어도 theme을 쓰는 컴포넌트까지 전부 리렌더! return ( {children} ); } ``` **해결 전략:** 1. **Context 분리** ```jsx

Question 2

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

Accepted Answer

**Error Boundary:** 자식 컴포넌트의 렌더링 에러를 잡아 폴백 UI를 표시합니다. ```tsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { logError(error, info); } render() { if (this.state.hasError) return

문제가 발생했습니다.

; return this.props.children; } } // 사용 ``` **Suspense:** 비동기 작업(데이터 패칭, lazy 로딩) 중 폴백 UI를 표시합니다. ```tsx c

Question 3

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

Accepted Answer

Compound Components는 **여러 컴포넌트가 암묵적 상태를 공유**하며 하나의 UI 단위를 구성하는 패턴입니다. ```jsx // 사용 예시 (API가 직관적) ``` **구현 (Context 기반):** ```jsx const SelectContext = createContext(); function Se

Question 4

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

Accepted Answer

웹 접근성은 모든 사용자가 동등하게 서비스를 이용할 수 있게 하는 것입니다. **키보드 접근성:** ```jsx function Modal({ isOpen, onClose, children }) { const modalRef = useRef(); useEffect(() => { if (isOpen) modalRef.current?.focus(); }, [isOpen]); return isOpen ? (

Question 5

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

Accepted Answer

**Automatic Batching**: React 18부터 모든 상태 업데이트가 자동으로 배치(묶어서 처리)됩니다.

```jsx
// React 17: setTimeout 내부는 배치 안 됨 (2번 리렌더)
// React 18: 모든 곳에서 자동 배치 (1번 리렌더)
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React 18: 한 번만 리렌더!
}, 1000);

// fetch, Promise, 이벤트 핸들러 모두 자동 배치
fetch('/api').then(() => {
  setData(data);
  setLoading(false); // 한 번만 리렌더
});
```

**flushSync**: 배치를 강제로 중단하고 즉시 DOM에 반영
```jsx
import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(()

React

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

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

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

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

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