Next.js 라우팅 및 내비게이션
Dynamic routes, route groups, parallel routes, intercepting routes, useRouter, Link, redirect
22 면접 질문·
Mid-Level
1Next.js App Router에서 동적 라우트를 생성하는 구문은 무엇인가요?
1
Next.js App Router에서 동적 라우트를 생성하는 구문은 무엇인가요?
답변
Next.js App Router의 동적 라우트는 가변 URL 세그먼트를 정의하기 위해 대괄호를 사용합니다. 예를 들어, [id]는 URL의 해당 위치에서 모든 값을 캡처하는 라우트를 생성합니다. 이 값은 페이지 파라미터를 통해 접근할 수 있습니다. 이 규칙을 통해 각 변형에 대한 별도 파일을 생성하지 않고도 다양한 콘텐츠에 적응하는 범용 페이지를 만들 수 있습니다.
2Next.js에서 Link 컴포넌트의 주요 역할은 무엇인가요?
2
Next.js에서 Link 컴포넌트의 주요 역할은 무엇인가요?
답변
Link 컴포넌트는 Next.js에서 권장되는 내비게이션 요소입니다. 뷰포트에 보이는 라우트를 자동으로 프리페치하고 전체 페이지 리로드 없이 클라이언트 사이드 내비게이션을 가능하게 합니다. 표준 a 태그와 달리, Link는 애플리케이션 상태를 유지하고 페이지 간 부드러운 전환을 제공하여 사용자 경험과 성능을 크게 향상시킵니다.
3Server Component에서 동적 라우트 파라미터에 접근하는 방법은?
3
Server Component에서 동적 라우트 파라미터에 접근하는 방법은?
답변
Next.js App Router에서 Server Components는 동적 URL 세그먼트를 포함하는 params 객체를 자동으로 받습니다. 이 객체는 컴포넌트 함수에 prop으로 전달됩니다. 예를 들어, [id] 라우트의 경우 params.id에 캡처된 값이 포함됩니다. 이 접근 방식은 클라이언트 사이드 훅 없이도 파라미터 접근을 단순화합니다.
4
Next.js에서 route groups의 주요 이점은 무엇인가요?
5
useRouter와 usePathname의 차이점은 무엇인가요?
+19 면접 질문
기타 React / Next.js 면접 주제
JavaScript 기초
Junior
25개 질문React 기초
Junior
20개 질문React Hooks
Junior
22개 질문컴포넌트 라이프사이클
Junior
18개 질문React Router
Junior
20개 질문Context를 활용한 상태 관리
Junior
18개 질문폼과 Controlled Components
Mid-Level
20개 질문데이터 가져오기 및 API
Mid-Level
20개 질문React Query (TanStack Query)
Mid-Level
20개 질문Styling & CSS-in-JS
Mid-Level
18개 질문Next.js 기초
Mid-Level
25개 질문TypeScript와 React
Mid-Level
20개 질문Next.js 데이터 페칭
Mid-Level
24개 질문Next.js Server Actions
Mid-Level
20개 질문Next.js API Routes
Mid-Level
20개 질문Next.js Metadata & SEO
Mid-Level
18개 질문Next.js Middleware 및 Auth
Mid-Level
22개 질문React 테스트
Mid-Level
20개 질문Zustand State Management
Mid-Level
18개 질문React 성능 최적화
Senior
22개 질문Error Boundaries & 에러 핸들링
Senior
18개 질문Advanced React Patterns
Senior
20개 질문Next.js 고급 기능
Senior
24개 질문Next.js 배포 및 프로덕션
Senior
20개 질문아키텍처 & 디자인 패턴
Senior
22개 질문React Server Components
Senior
26개 질문Next.js 국제화
Senior
20개 질문React 보안 & 모범 사례
Senior
22개 질문