Q1: React 컴포넌트를 TypeScript로 만드는 기본 방법은 무엇인가요?
A1: React 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 방법으로 만들 수 있습니다. TypeScript에서는 컴포넌트의 props 타입을 명시해 주는 것이 핵심입니다.
- 함수형 컴포넌트 예시:
```tsx
import React from 'react';

interface Props {
title: string;
count?: number; // 선택적 속성
}

const MyComponent: React.FC = ({ title, count }) => {
return (

{title}

{count &&

Count: {count}

}

);
};

export default MyComponent;
```

Q2: React.FC 타입은 무엇이고 꼭 사용해야 하나요?
A2: React.FC는 React Function Component의 줄임말로 함수형 컴포넌트의 타입을 지정해줍니다.
- props 타입 지정과 children 자동 지원 등 편리한 기능을 제공합니다.
- 하지만 children 사용을 원하지 않을 경우 불필요하다고 보고, 직접 함수 타입에 props만 명시하는 방식을 권장하기도 합니다.
```tsx
const MyComponent = ({ title }: Props) => { ... }
// 혹은
const MyComponent: React.FC = ({ title }) => { ... }
```

Q3: 클래스형 컴포넌트를 TypeScript로 작성하는 방법은?
A3: `React.Component` 또는 `React.PureComponent`를 상속하며, 제네릭 파라미터로 props와 state 타입을 넣습니다.
```tsx
import React from 'react';

interface Props {
name: string;
}
interface State {
count: number;
}

class MyComponent extends React.Component {
state: State = { count: 0 };

render() {
return

{this.props.name}: {this.state.count}

;

}
}

export default MyComponent;
```

Q4: props에 기본값(defaultProps)을 설정하려면 어떻게 해야 하나요?
A4: 함수형 컴포넌트에서는 기본 파라미터 할당을 권장합니다. `defaultProps`는 과거 방식으로 TypeScript와 완벽하게 호환되지 않을 수 있습니다.
```tsx
interface Props {
title?: string;
}

const MyComponent: React.FC = ({ title = "기본 제목" }) => {
return

{title}

;
};
```

Q5: 이벤트 핸들러의 타입은 어떻게 지정하나요?
A5: React 이벤트 타입은 `React.ChangeEvent`, `React.MouseEvent` 등으로 지정합니다.
```tsx
const handleClick = (event: React.MouseEvent) => {
console.log(event.currentTarget);
};
```

Q6: children 타입을 명시하려면 어떻게 해야 하나요?
A6: React.FC는 기본적으로 children을 포함하지만, 직접 props 타입을 선언하면 다음과 같이 명시합니다.
```tsx
interface Props {
children: React.ReactNode;
}

const MyComponent = ({ children }: Props) => {
return

{children}

;
};
```

Q7: TypeScript에서 컴포넌트를 내보내고(import/export) 사용하는 방법은?
A7: 일반 JavaScript와 동일하며, 타입 정보는 자동으로 유지됩니다.
```tsx
// MyComponent.tsx
export const MyComponent: React.FC = ({ title }) => { ... };

// App.tsx
import { MyComponent } from './MyComponent';
```

---

요약하자면, React 컴포넌트를 TypeScript로 만들 때 가장 중요한 것은 props와 state(클래스형일 경우)의 타입을 명확히 지정하는 것입니다. 함수형 컴포넌트에서는 인터페이스를 정의하고 파라미터에 타입을 주며, 클래스형 컴포넌트는 제네릭 타입으로 props와 state를 지정합니다. 또한 이벤트 핸들러, children 타입 등 React 고유 요소들의 타입도 React에서 제공하는 타입을 사용하는 것이 안전하고 편리합니다.

React의 Context API란 무엇인가요?

React에서 Suspense와 Lazy Loading은 어떻게 사용하나요?

React에서 TypeScript를 사용하여 컴포넌트를 만드는 것은 타입 안전성을 제공하며, 코드의 가독성과 유지보수성을 향상시킵니다.

TypeScript는 JavaScript의 상위 집합으로, 정적 타입 검사를 지원하여 개발자가 코드에서 발생할 수 있는 오류를 사전에 방지할 수 있도록 도와줍니다.

아래에서는 React에서 TypeScript를 사용하여 컴포넌트를 만드는 방법에 대해 자세히 설명하겠습니다.

1. TypeScript 환경 설정 먼저, TypeScript를 사용하기 위해 React 프로젝트를 설정해야 합니다.

Create React App을 사용하여 TypeScript 프로젝트를 쉽게 생성할 수 있습니다.

```bash npx create-react-app my-app --template typescript cd my-app ``` 이 명령어는 TypeScript를 지원하는 새로운 React 프로젝트를 생성합니다.



2. 컴포넌트 생성 TypeScript를 사용하여 React 컴포넌트를 만들기 위해서는 `.tsx` 확장자를 가진 파일을 생성해야 합니다.

예를 들어, `MyComponent.tsx`라는 파일을 생성하고 다음과 같이 작성할 수 있습니다.

```tsx import React from 'react'; interface MyComponentProps { title: string; count: number; } const MyComponent: React.FC = ({ title, count }) => { return (

{title}

Count: {count}

); }; export default MyComponent; ```

3. Props 타입 정의 위의 예제에서 `MyComponentProps`라는 인터페이스를 정의하여 컴포넌트의 props 타입을 지정했습니다.

이 인터페이스는 `title`과 `count`라는 두 개의 속성을 가지고 있으며, 각각 `string`과 `number` 타입으로 정의되어 있습니다.



4. 컴포넌트 사용 이제 `MyComponent`를 다른 컴포넌트에서 사용할 수 있습니다.

예를 들어, `App.tsx` 파일에서 다음과 같이 사용할 수 있습니다.

```tsx import React from 'react'; import MyComponent from './MyComponent'; const App: React.FC = () => { return (

); }; export default App; ```

5. 기본값 및 선택적 Props TypeScript를 사용하면 기본값 및 선택적 props를 쉽게 정의할 수 있습니다.

선택적 props는 인터페이스에서 물음표(`?`)를 사용하여 정의할 수 있습니다.

```tsx interface MyComponentProps { title: string; count?: number; // 선택적 props } const MyComponent: React.FC = ({ title, count = 0 }) => { return (

{title}

Count: {count}

); }; ``` 위의 코드에서 `count`는 선택적 props로 정의되었으며, 기본값을 `0`으로 설정했습니다.



6. 상태 관리 TypeScript를 사용하여 상태를 관리하는 방법도 있습니다.

예를 들어, `useState` 훅을 사용할 때 상태의 타입을 지정할 수 있습니다.

```tsx import React, { useState } from 'react'; const Counter: React.FC = () => { const [count, setCount] = useState(0); return (

Count: {count}

setCount(count + 1)}>Increment

); }; export default Counter; ```

7. 이벤트 핸들러 이벤트 핸들러의 타입도 TypeScript를 사용하여 정의할 수 있습니다.

예를 들어, 버튼 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

```tsx const MyButton: React.FC = () => { const handleClick = (event: React.MouseEvent) => { console.log('Button clicked!'); }; return Click Me; }; ```

8. Context API와 TypeScript Context API를 사용할 때도 TypeScript를 활용할 수 있습니다.

Context의 타입을 정의하고, Provider와 Consumer에서 타입을 적용할 수 있습니다.

```tsx import React, { createContext, useContext, useState } from 'react'; interface AuthContextType { isAuthenticated: boolean; login: () => void; logout: () => void; } const AuthContext = createContext(undefined); const AuthProvider: React.FC = ({ children }) => { const [isAuthenticated, setIsAuthenticated] = useState(false); const login = () => setIsAuthenticated(true); const logout = () => setIsAuthenticated(false); return ( {children} ); }; const useAuth = () => { const context = useContext(AuthContext); if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider'); } return context; }; export { AuthProvider, useAuth }; ```

9. React에서 TypeScript를 사용하면 코드의 안정성과 가독성을 높일 수 있습니다.

타입을 명확히 정의함으로써 개발자는 더 안전하게 코드를 작성할 수 있으며, IDE의 자동 완성 기능을 통해 생산성을 높일 수 있습니다.

위에서 설명한 다양한 방법을 통해 TypeScript와 함께 React 컴포넌트를 효과적으로 작성할 수 있습니다.