Q1.

<aside> 💡

Q. 보니깐 tsx 파일이던데, 이건 react 및 js랑 뭐가 달라?

</aside>

진짜 잘 봤다! 👀

맞아, .tsx 파일이면 React + TypeScript 조합으로 만든 거야.

아래에 간단하면서도 핵심적인 차이점 알려줄게.

✅ .js vs .jsx vs .ts vs .tsx 정리

확장자 의미 설명
.js JavaScript 순수 자바스크립트
.jsx JavaScript + JSX React 컴포넌트 작성 가능 (JSX 문법 포함)
.ts TypeScript 정적 타입이 추가된 자바스크립트 (React 안씀)
.tsx TypeScript + JSX React 컴포넌트를 TypeScript 기반으로 작성할 수 있는 확장자

✅ 그럼 .tsx는 뭐가 다르냐?

📌 핵심 차이: "정적 타입 시스템(Type Safety)"

예시 비교:

// JSX (.jsx or .js)
const Hello = ({ name }) => {
  return <div>Hello {name}</div>;
}


// TSX (.tsx)
type Props = {
  name: string;
};

const Hello = ({ name }: Props) => {
  return <div>Hello {name}</div>;
};

→ name이 string이라는 걸 명시해줌.

→ 타입 오류도 IDE에서 코딩 도중에 미리 감지 가능!

✅ .tsx를 쓰면 좋은 이유

장점 설명
✅ 실수 방지 props, 상태 값 등에 타입 지정 → 잘못된 데이터 방지
✅ 유지보수 용이 협업 시 타입 기반으로 코드 이해 쉬움
✅ 자동완성 향상 IDE에서 prop 타입, 객체 구조 자동 추론 가능
✅ 문서화 효과 함수나 컴포넌트에 타입이 붙어서 설명 안 해도 이해됨