# TypeScript와 React (React / Next.js)

> props, state, 이벤트, 제네릭, FC 타입, children 타입, 훅 타이핑

- 20 면접 질문
- Mid-Level
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

## 1. React 컴포넌트의 props를 타입 지정하는 올바른 구문은 무엇인가요?

**답변**

Props 인터페이스 다음에 Props를 매개변수로 함수를 타입 지정하는 방법이 권장되는 표준 구문입니다. 이 접근법은 뛰어난 타입 추론을 제공하고 코드의 다른 곳에서 Props 타입을 쉽게 재사용할 수 있습니다. React.FC보다 명시적이며 children 타이핑을 더 잘 제어할 수 있습니다.

## 2. useState로 간단한 state를 올바르게 타입 지정하는 방법은?

**답변**

TypeScript는 useState에 전달된 초기값에서 state 타입을 자동으로 추론합니다. string과 같은 단순한 값의 경우 제네릭 타입을 명시적으로 지정할 필요가 없습니다. 자동 추론으로 충분하며 코드를 더 간결하게 만듭니다. 명시적 타이핑은 유니온 타입이나 초기값이 null인 경우에만 유용합니다.

## 3. 버튼의 onClick 이벤트에 올바른 타입은 무엇인가요?

**답변**

React.MouseEvent<HTMLButtonElement>는 버튼의 클릭 이벤트에 특화된 타입입니다. 제네릭 파라미터 HTMLButtonElement는 관련 DOM 요소를 지정하여 event.currentTarget을 통해 버튼 고유의 속성에 접근할 수 있게 합니다. 네이티브 DOM의 MouseEvent나 너무 일반적인 타입을 사용하면 이 타이핑 정밀도를 잃게 됩니다.

## 17개 추가 질문 이용 가능

- 래퍼 컴포넌트의 children을 타입 지정하는 데 어떤 타입을 사용해야 하나요?
- React.FC와 직접 타이핑의 주요 차이점은 무엇인가요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior
- [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react