React 미드레벨 종합 기술면접

먼저 useEffect의 dependency array를 정확히 설정하여 필요한 경우에만 API를 호출하도록 해야 합니다. 데이터를 상위 컴포넌트로 lifting하거나, 캐싱 전략을 적용할 수 있습니다. React Query나 SWR은 자동 캐싱, 백그라운드 리페칭, 중복 제거, 낙관적 업데이트 등을 제공하여 수동으로 구현해야 할 복잡한 로직을 간소화합니다. 특히 stale-while-revalidate 패턴으로 UX와 데이터 신선도를 동시에 개선할 수 있습니다.

Render Props는 함수를 자식으로 전달하여 렌더링 로직을 공유하고, HOC는 컴포넌트를 감싸서 props를 주입하는 패턴입니다. 두 패턴 모두 로직 재사용을 위해 사용되지만, wrapper hell과 props drilling 문제가 발생할 수 있습니다. Hooks는 로직 재사용을 더 간결하게 해결하여 대부분의 경우 선호됩니다. 하지만 클래스 컴포넌트와의 호환성이 필요하거나, 외부 라이브러리 통합, 또는 컴포넌트 트리 구조 자체를 조작해야 하는 경우 HOC가 여전히 유용합니다.

먼저 Error Boundary를 구현하여 런타임 에러를 catch하고 fallback UI를 표시해야 합니다. Sentry나 LogRocket 같은 에러 모니터링 도구를 통합하여 실제 에러 스택과 사용자 세션을 추적합니다. 브라우저 콘솔 로그를 원격으로 수집하고, 번들 사이즈와 청크 로딩 실패 여부를 확인합니다. 특정 브라우저나 네트워크 환경에서만 발생하는지 파악하고, source map을 활용해 minified 코드의 원본 위치를 추적합니다. 또한 lazy loading된 컴포넌트의 로딩 실패에 대한 retry 로직을 추가합니다.

거대한 state 객체는 일부 필드만 변경되어도 전체 객체가 새로 생성되어 불필요한 리렌더링을 유발할 수 있습니다. state를 논리적으로 분리하여 독립적인 useState로 관리하거나, 연관된 값들만 그룹화해야 합니다. 복잡한 state 업데이트 로직이 있거나, 다음 state가 이전 state에 의존하는 경우, 또는 여러 하위 값을 포함하는 복잡한 객체일 때는 useReducer가 적합합니다. useReducer는 업데이트 로직을 컴포넌트 외부로 분리하여 테스트와 재사용이 용이합니다.

react-i18next나 next-i18next 같은 라이브러리를 사용하여 번역 리소스를 관리합니다. 번역 파일은 언어별로 분리하고 dynamic import로 필요한 언어만 로드하여 초기 번들 사이즈를 줄입니다. Context API로 현재 언어를 전역 관리하고, localStorage에 사용자 선호 언어를 저장합니다. SSR 환경에서는 Accept-Language 헤더나 URL 경로로 초기 언어를 결정하고, 서버에서 해당 언어의 번역을 미리 주입합니다. SEO를 위해 hreflang 태그를 추가하고, 각 언어별로 별도 URL 구조를 사용합니다. SSG에서는 빌드 타임에 모든 언어 버전을 생성합니다.