React 미드레벨 코딩 및 알고리즘 면접

throttle은 일정 시간 간격으로 함수를 실행하고, debounce는 마지막 호출 후 일정 시간이 지나야 실행합니다. 무한 스크롤에는 throttle이 적합한데, 스크롤 중에도 주기적으로 위치를 체크해야 추가 데이터를 로드할 수 있기 때문입니다. Custom Hook에서는 useEffect의 cleanup 함수에서 타이머를 clear해야 하며, useRef로 타이머 ID를 저장하여 컴포넌트 언마운트 시 메모리 누수를 방지해야 합니다. 또한 throttle 간격은 보통 100-200ms가 적절하며, 너무 짧으면 성능 이점이 없고 너무 길면 사용자 경험이 저하됩니다.

Set과 Array를 동시에 유지하는 방식은 중복 체크는 O(1)로 빠르지만, 두 자료구조를 동기화해야 하는 오버헤드가 있습니다. 추가 시 Set.has()로 중복 체크 후 Array.push()와 Set.add()를 모두 수행하면 O(1)이고, 삭제 시 Array.splice()는 O(n), Set.delete()는 O(1)입니다. 대안으로 Map을 사용하여 태그를 key로, 인덱스를 value로 저장하면 순서 정보도 함께 관리할 수 있습니다. 또는 단순히 Array만 사용하고 중복 체크 시 Array.includes()를 사용하되, 태그 개수가 적다면(100개 이하) O(n) 복잡도도 실용적입니다. 실무에서는 태그 개수가 보통 수십 개 이하이므로 Array만 사용하는 것이 코드 복잡도 측면에서 더 나을 수 있습니다.

여러 boolean을 단일 status 상태로 통합하여 'idle', 'loading', 'success', 'error', 'empty' 같은 문자열 리터럴로 관리하면 상태 전환이 원자적으로 일어나 중간 상태를 방지할 수 있습니다. TypeScript에서는 type Status = { status: 'loading' } | { status: 'error', error: Error } | { status: 'success', data: Data } 같은 discriminated union을 사용하면, status 값에 따라 error나 data 속성의 존재가 타입 레벨에서 보장됩니다. useReducer와 함께 사용하면 상태 전환 로직을 명확히 정의할 수 있고, 불가능한 상태 조합(isLoading과 isSuccess가 동시에 true)을 원천적으로 방지할 수 있습니다. 이 패턴은 XState 같은 상태 머신 라이브러리의 기본 원리이기도 합니다.

큐와 실행 중인 작업 카운터를 사용한 동시성 제어 패턴을 구현해야 합니다. 전체 파일 배열에서 처음 3개를 시작하고, 하나가 완료될 때마다 큐에서 다음 파일을 가져와 업로드하는 방식입니다. 각 파일의 상태를 Map이나 객체로 관리하여 { id, progress, status }를 저장하고, XMLHttpRequest의 onprogress나 fetch의 ReadableStream을 사용하여 진행률을 추적합니다. React 상태로는 Map<fileId, FileUploadState>를 사용하여 개별 파일의 진행 상황을 업데이트하고, 컴포넌트에서는 이를 배열로 변환하여 렌더링합니다. p-limit 같은 라이브러리를 사용하면 더 간단하지만, 직접 구현 시에는 재귀나 while 루프로 큐를 소비하는 로직을 작성할 수 있습니다.

React DevTools Profiler의 Flamegraph와 Ranked 뷰를 사용하여 렌더링 시간이 긴 컴포넌트를 식별하고, 'Why did this render?' 기능으로 리렌더링 원인을 파악합니다. 차트 라이브러리 통합 시에는 useRef로 차트 인스턴스를 저장하고, useEffect에서 데이터 변경 시 차트의 update() 메서드만 호출하여 전체 재생성을 피해야 합니다. React.memo로 차트 컴포넌트를 감싸되, props 비교 함수에서 실제 데이터 변경 여부를 깊은 비교로 체크합니다. 또한 데이터를 useMemo로 메모이제이션하고, 차트 옵션 객체도 useMemo로 안정화하여 참조 동일성을 유지해야 합니다. 대용량 데이터의 경우 Web Worker로 데이터 가공을 오프로드하는 것도 고려할 수 있습니다.