Advanced React Patterns
Compound Components, Render Props, HOC, Custom Hooks patterns, Controlled/Uncontrolled, Provider, State Reducer, Props Getters
20 면접 질문·
Senior
1Compound Components 패턴이란 무엇인가요?
1
Compound Components 패턴이란 무엇인가요?
답변
Compound Components 패턴을 사용하면 React Context를 통해 암묵적인 상태를 공유하는 컴포넌트를 만들 수 있으며, props를 명시적으로 전달할 필요가 없습니다. 이 패턴은 Radix UI와 Headless UI 같은 라이브러리에서 유연하고 조합 가능한 API를 제공하기 위해 사용됩니다. 자식 컴포넌트는 공유 상태에 자동으로 접근할 수 있어, 공통 로직을 잃지 않고 구조를 커스터마이즈할 수 있습니다.
2Render Props 패턴의 원리는 무엇인가요?
2
Render Props 패턴의 원리는 무엇인가요?
답변
Render Props 패턴은 React 엘리먼트를 반환하는 함수를 prop으로 전달하여 부모 컴포넌트가 자식 컴포넌트와 로직을 공유할 수 있게 합니다. 이 함수는 부모의 데이터나 메서드를 매개변수로 받습니다. 이 패턴은 React Router와 Downshift 같은 라이브러리에서 사용되었으며, 훅이 등장하기 전에 매우 인기가 있었습니다.
3Higher-Order Components(HOC)란 무엇인가요?
3
Higher-Order Components(HOC)란 무엇인가요?
답변
Higher-Order Components는 컴포넌트를 매개변수로 받아 추가적인 props나 동작으로 강화된 새 컴포넌트를 반환하는 함수입니다. 이 패턴은 코드 중복 없이 컴포넌트 간에 로직을 재사용할 수 있게 합니다. HOC는 인증, 트래킹, 권한 관리와 같은 횡단 관심사에 사용됩니다.
4
제어 컴포넌트와 비제어 컴포넌트의 차이점은 무엇인가요?
5
Provider 패턴이란 무엇인가요?
+17 면접 질문
기타 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 라우팅 및 내비게이션
Mid-Level
22개 질문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개 질문Next.js 고급 기능
Senior
24개 질문Next.js 배포 및 프로덕션
Senior
20개 질문아키텍처 & 디자인 패턴
Senior
22개 질문React Server Components
Senior
26개 질문Next.js 국제화
Senior
20개 질문React 보안 & 모범 사례
Senior
22개 질문