리액트 + 타입스크립트 기초 1단계: 환경 설정 & 컴포넌트 기본

1. 리액트 + 타입스크립트 프로젝트 생성

npx create-react-app my-app --template typescript
cd my-app
npm start

• create-react-app은 리액트 앱을 빠르게 만들 수 있는 CLI 툴입니다.
• --template typescript는 타입스크립트 설정이 포함된 템플릿을 사용한다는 뜻이에요.

---

2. 타입스크립트 파일 확장자

• .tsx: JSX를 사용하는 컴포넌트 파일
• .ts: 일반 타입스크립트 파일 (예: 유틸 함수, 타입 정의 등)

---

3. 첫 번째 컴포넌트 만들기

// src/components/Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

✅ 타입스크립트에서는 props의 타입을 interface 또는 type으로 정의해줍니다.

---

4. 컴포넌트 사용하기

// src/App.tsx
import React from 'react';
import Greeting from './components/Greeting';

function App() {
  return (
    <div>
      <Greeting name="재이" />
    </div>
  );
}

export default App;

---

5. 타입스크립트에서 자주 쓰이는 타입 예시

let username: string = '재이';
let age: number = 30;
let isDeveloper: boolean = true;
let hobbies: string[] = ['코딩', '음악'];

type User = {
  id: number;
  name: string;
};

---

📌 요약

create-react-app --template typescript	프로젝트 생성 방법
.tsx	JSX + 타입스크립트 파일
interface	props나 객체의 구조를 정의할 때 사용
React.FC<Props>	함수형 컴포넌트의 타입 정의 방식 중 하나

---

다음 단계로 넘어가고 싶으신가요?

• 🔹 컴포넌트 상태관리 (useState, useEffect)
• 🔹 props vs state 차이
• 🔹 타입스크립트에서 Optional, Union, Enum, Generic 사용법

원하시는 방향이나 테마가 있다면 알려주세요 :)
예: "ToDo 앱 만들어보기", "상태관리 라이브러리까지 확장", "Zustand 적용" 등.