TypeScript와 React
props, state, 이벤트, 제네릭, FC 타입, children 타입, 훅 타이핑
20 면접 질문·
Mid-Level
1React 컴포넌트의 props를 타입 지정하는 올바른 구문은 무엇인가요?
1
React 컴포넌트의 props를 타입 지정하는 올바른 구문은 무엇인가요?
답변
Props 인터페이스 다음에 Props를 매개변수로 함수를 타입 지정하는 방법이 권장되는 표준 구문입니다. 이 접근법은 뛰어난 타입 추론을 제공하고 코드의 다른 곳에서 Props 타입을 쉽게 재사용할 수 있습니다. React.FC보다 명시적이며 children 타이핑을 더 잘 제어할 수 있습니다.
2useState로 간단한 state를 올바르게 타입 지정하는 방법은?
2
useState로 간단한 state를 올바르게 타입 지정하는 방법은?
답변
TypeScript는 useState에 전달된 초기값에서 state 타입을 자동으로 추론합니다. string과 같은 단순한 값의 경우 제네릭 타입을 명시적으로 지정할 필요가 없습니다. 자동 추론으로 충분하며 코드를 더 간결하게 만듭니다. 명시적 타이핑은 유니온 타입이나 초기값이 null인 경우에만 유용합니다.
3버튼의 onClick 이벤트에 올바른 타입은 무엇인가요?
3
버튼의 onClick 이벤트에 올바른 타입은 무엇인가요?
답변
React.MouseEvent<HTMLButtonElement>는 버튼의 클릭 이벤트에 특화된 타입입니다. 제네릭 파라미터 HTMLButtonElement는 관련 DOM 요소를 지정하여 event.currentTarget을 통해 버튼 고유의 속성에 접근할 수 있게 합니다. 네이티브 DOM의 MouseEvent나 너무 일반적인 타입을 사용하면 이 타이핑 정밀도를 잃게 됩니다.
4
래퍼 컴포넌트의 children을 타입 지정하는 데 어떤 타입을 사용해야 하나요?
5
React.FC와 직접 타이핑의 주요 차이점은 무엇인가요?
+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개 질문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개 질문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개 질문