React 미드레벨 기술면접

setState(value)는 현재 state 값을 클로저로 캡처하여 사용하고, setState(prev => prev + 1)는 최신 state를 보장받습니다. 이벤트 핸들러에서 여러 번 state를 업데이트하거나, useEffect/setTimeout 같은 비동기 콜백 내에서 state를 참조할 때는 functional update를 사용해야 합니다. 직접 값을 전달하면 클로저 문제로 인해 이전 값을 참조하여 업데이트가 누락되는 버그가 발생할 수 있습니다. 특히 카운터 증가, 배열/객체 업데이트 시 이전 상태에 의존하는 경우 반드시 함수형 업데이트를 사용해야 합니다.

React.memo는 컴포넌트 메모이제이션, useMemo는 계산 비용이 높은 값의 메모이제이션, useCallback은 함수 참조 메모이제이션입니다. 과도한 사용 시 메모이제이션 자체의 비교 비용(shallow comparison)과 메모리 오버헤드가 발생하여 오히려 성능이 저하됩니다. 최적화 적용 기준은 1) 실제 성능 문제가 측정되었을 때, 2) 렌더링 비용이 높은 컴포넌트, 3) props가 자주 변경되지 않는 경우, 4) 자식 컴포넌트가 React.memo로 감싸져 있어 참조 동일성이 중요한 경우입니다. 프로파일러로 측정 후 병목이 확인된 부분에만 선택적으로 적용하는 것이 좋습니다.

Context API는 업데이트 빈도가 낮고 컴포넌트 트리가 깊지 않을 때 적합하며, 테마, 인증 정보, 언어 설정 등에 사용합니다. 외부 라이브러리는 1) 상태 업데이트가 빈번한 경우, 2) 세밀한 렌더링 최적화가 필요한 경우, 3) 미들웨어(로깅, 비동기 처리)가 필요한 경우, 4) 개발자 도구와 시간 여행 디버깅이 필요한 경우에 도입합니다. Context는 Provider 하위 모든 Consumer가 리렌더링되는 한계가 있어 성능이 중요한 대규모 앱에서는 부적합합니다. 상태의 성격(서버 상태 vs 클라이언트 상태)을 구분하고, React Query 같은 서버 상태 라이브러리와의 조합도 고려해야 합니다.

dependency array를 잘못 사용하면 stale closure 문제로 최신 props/state를 참조하지 못하거나, 의도하지 않은 부수효과가 발생합니다. eslint-plugin-react-hooks의 exhaustive-deps 규칙을 따라 effect 내부에서 사용하는 모든 외부 값을 의존성에 포함해야 합니다. 개선 방법은 1) 필요한 의존성 추가, 2) useCallback/useMemo로 참조 안정화, 3) effect 분리, 4) useReducer로 로직 통합입니다. 정당하게 빈 배열을 사용하는 경우는 컴포넌트 마운트 시 한 번만 실행되어야 하는 초기화 로직(이벤트 리스너 등록, 외부 라이브러리 초기화)이지만, 이 경우에도 effect 내부에서 외부 값을 참조하지 않아야 합니다.

코드 스플리팅은 React.lazy와 dynamic import를 사용하여 라우트 레벨 또는 컴포넌트 레벨에서 적용하며, 번들 크기 감소와 초기 로딩 속도 개선이 목표입니다. Suspense로 로딩 상태를 선언적으로 관리하고, 여러 lazy 컴포넌트를 하나의 Suspense로 감싸 로딩 UI를 통합할 수 있습니다. 고려사항은 1) 적절한 chunk 크기와 분할 기준, 2) prefetching/preloading 전략, 3) 에러 바운더리와 함께 사용, 4) 로딩 폭포수 방지입니다. SSR 환경에서는 React.lazy가 서버에서 동작하지 않으므로 loadable-components 같은 라이브러리를 사용하거나, Next.js의 dynamic import를 활용해야 하며, 서버와 클라이언트의 chunk 매칭이 중요합니다.