프론트엔드 기술 면접 질문

 

 

 

Q. React에서 useReducer 훅이 무엇이며, useState와의 차이점을 설명해주세요

A. useReducer는 복잡한 상태 로직을 관리하기 위한 훅으로, 상태 변화를 액션 객체를 통해 명시적으로 처리합니다. 상태 업데이트 로직이 컴포넌트 외부에 존재하여 테스트와 재사용이 용이하며, 다수의 상태값이 연관되어 있거나 이전 상태에 의존하는 복잡한 상태 관리에 적합합니다. 반면 useState는 단순한 상태 관리에 적합하며 사용법이 간단하고 직관적입니다.

 

 

Q. React에서 forwardRef는 무엇이며, 어떤 상황에서 유용하게 사용할 수 있는지 설명해주세요

A. forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 DOM에 직접 접근할 수 있게 해주는 React 기능입니다.

일반 컴포넌트는 ref prop을 받을 수 없지만, forwardRef로 감싸면 두 번째 파라미터로 ref를 받아서 DOM 요소에 전달할 수 있습니다.

주로 input 요소에 포커스를 주거나, 특정 DOM 요소의 크기나 위치를 측정해야 할 때 사용합니다.

 

 

Q. React의 useLayoutEffect와 useEffect의 차이점을 설명하고, 각각 언제 사용해야 하는지 설명해주세요.

A. useEffect는 DOM 업데이트 후 비동기적으로 실행되어 렌더링을 차단하지 않는 반면, useLayoutEffect는 DOM 업데이트 후 화면 페인팅 전에 동기적으로 실행됩니다

 

 

Q. Next.js에서 getServerSideProps, getStaticProps, ISR(Incremental Static Regeneration)의 차이점을 설명해주세요.

A.

• getServerSideProps: 매 요청마다 서버에서 실행되어 항상 최신 데이터를 제공하지만, 페이지 로딩 속도가 상대적으로 느립니다.
• getStaticProps: 빌드 시점에 데이터를 미리 가져와 정적 HTML을 생성하므로 매우 빠르지만, 데이터 업데이트시 재빌드가 필요합니다.
• ISR: 정적 페이지의 장점을 유지하면서 설정한 시간(revalidate) 간격으로 백그라운드에서 페이지를 재생성하여 데이터를 업데이트합니다.

 

 

Q. Next.js에서 App Router와 Pages Router의 차이점을 설명해주세요.

A.

• App Router는 React 서버 컴포넌트를 기반으로 하며, 파일 시스템 기반 라우팅과 중첩 레이아웃을 지원합니다.
• Pages Router는 전통적인 클라이언트 사이드 렌더링 중심이며, 페이지 단위 라우팅 구조를 가집니다.
• App Router는 더 세분화된 데이터 로딩 제어와 서버 중심 렌더링을 제공하는 반면, Pages Router는 더 단순한 구조와 호환성을 제공합니다.

 

 

Q. Next.js에서 Middleware란 무엇이며, 어떤 상황에서 유용하게 사용할 수 있는지 설명해주세요.

A.

• Next.js 미들웨어는 요청이 완료되기 전에 서버 측에서 실행되는 코드로, 응답을 수정하거나 리다이렉션할 수 있습니다.
• 주요 사용 사례로는 인증 및 권한 검증, 국제화(i18n) 처리, A/B 테스트, 요청/응답 헤더 수정이 있습니다.
• 프로젝트 루트에 middleware.js 파일을 생성하여 구현하며, matcher 설정으로 특정 경로에만 적용할 수 있습니다.