React + TypeScript에서 JSX/TSX 문법은 조금 더 엄격한 타입 시스템과 함께 쓰이기 때문에, 문법과 타입의 조화가 중요해.

📘 예제 6: JSX와 타입 시스템의 만남

TypeScript를 쓰면 JSX 안의 데이터도 타입 추론과 오류 검사가 적용돼.

const Hello = () => {
  const name: string = '박하';
  const age: number = 25;

  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>나이는 {age + 1}살입니다.</p>
    </div>
  );
};

✅ TypeScript는 {} 안의 표현식도 타입 체크를 해줘. name이 문자열이 아니면 오류가 발생해.

📘 예제 7: 컴포넌트 리턴 타입 - JSX.Element vs ReactNode

// 명시적으로 리턴 타입을 지정할 수 있음
const Title = (): JSX.Element => {
  return <h1>타이틀 컴포넌트</h1>;
};

// 또는 ReactNode 사용
import { ReactNode } from 'react';

const Wrapper = (): ReactNode => {
  return (
    <>
      <p>여러 줄 리턴 가능</p>
      <span>ReactNode는 JSX.Element보다 범용적</span>
    </>
  );
};
타입 의미
JSX.Element JSX로 만든 단일 컴포넌트 리턴용
ReactNode 문자열, 숫자, JSX, 배열, null 등 다양한 리턴 가능

✅ 일반적으로 JSX.Element를 쓰지만, children이나 여러 타입을 리턴하는 경우엔 ReactNode가 유리해.

📘 예제 8: Props 없이 만드는 컴포넌트

Props가 필요 없는 경우에도 타입은 명시 가능해.

const Footer: React.FC = () => {
  return <footer>푸터입니다</footer>;
};

또는 명시적으로 타입 없이 작성해도 돼:

const Footer = () => {
  return <footer>푸터입니다</footer>;
};

✅ React.FC는 기본적으로 children을 포함하고 Prop 타입을 제네릭으로 받을 수 있어.