React 미드레벨 기술면접

React는 기본적으로 부모가 리렌더링되면 모든 자식도 리렌더링됩니다. key prop은 React가 리스트의 어떤 항목이 변경, 추가, 삭제되었는지 식별하는 데 사용됩니다. index를 key로 사용하면 항목의 순서가 변경되거나 중간에 삽입/삭제될 때 React가 컴포넌트를 잘못 재사용하여 상태가 꼬이거나 불필요한 DOM 조작이 발생합니다. key는 항목의 고유 식별자(ID)를 사용해야 하며, 없다면 항목의 내용을 기반으로 한 안정적인 해시값을 생성해야 합니다. 정렬, 필터링이 자주 발생하는 리스트에서는 절대 index를 key로 사용하지 않아야 합니다.

Context API는 value가 변경되면 모든 Consumer가 리렌더링되는 구조적 한계가 있습니다. Zustand 같은 라이브러리는 외부 store를 사용하고, 각 컴포넌트가 필요한 상태 조각만 selector로 구독하는 방식으로 동작합니다. 내부적으로는 useSyncExternalStore를 사용하거나 subscription 패턴으로 상태 변경을 감지하고, 이전 값과 새 값을 비교(shallow equal)하여 실제로 변경된 경우에만 리렌더링을 트리거합니다. 직접 구현한다면 외부 store 객체, subscribe/unsubscribe 메서드, 그리고 selector 함수를 받아 해당 부분만 비교하는 custom hook을 만들 것입니다.

HTTP 캐시 헤더는 브라우저와 CDN 레벨에서 동작하며, Cache-Control로 캐시 수명을 제어하고 ETag로 조건부 요청을 구현합니다. 클라이언트 측에서는 React Query나 SWR을 사용하여 메모리에 데이터를 캐싱하고, stale-while-revalidate 패턴으로 stale 데이터를 즉시 보여주면서 백그라운드에서 재검증합니다. 이 패턴은 사용자에게 빠른 응답을 제공하면서도 데이터 신선도를 유지합니다. 실무에서는 자주 변경되지 않는 마스터 데이터는 긴 캐시 수명을, 실시간성이 중요한 데이터는 짧은 staleTime을 설정합니다.

알림 ID를 키로 하는 Map으로 O(1) 조회와 읽음 처리를 구현하고, 우선순위별 정렬을 위해 최소 힙(Min Heap) 또는 배열과 이진 탐색을 조합합니다. 새 알림 추가는 Map에 O(1), 힙에 O(log n)으로 처리됩니다. 오래된 알림 삭제는 타임스탬프 기반 힙을 사용하여 가장 오래된 항목을 O(log n)에 제거하거나, 주기적 배치 처리로 필터링합니다. 메모리 효율성을 위해 일정 개수 이상의 알림은 로컬 스토리지나 서버로 오프로드하고, 화면에 보이는 최근 N개만 메모리에 유지합니다. 읽음 처리된 알림은 별도 Set으로 관리하여 빠른 확인이 가능하도록 합니다.

컴포넌트는 UI 렌더링과 사용자 인터랙션만 담당하도록 하고, 비즈니스 로직은 Custom Hook으로 분리합니다. API 호출은 별도의 service 레이어나 api 모듈로 추상화하고, 데이터 변환 로직은 순수 함수로 분리하여 utils나 transformers 폴더에 배치합니다. 유효성 검증은 별도의 validator 함수나 schema(Zod, Yup)로 분리합니다. 이렇게 분리하면 각 레이어를 독립적으로 단위 테스트할 수 있고, 컴포넌트는 React Testing Library로, 비즈니스 로직은 순수 함수 테스트로, API는 MSW로 모킹하여 테스트 가능합니다. 코드 재사용성과 유지보수성이 크게 향상됩니다.