.js 파일
- 일반 자바스크립트 파일
- 순수한 JavaScript 코드만 포함
- React 컴포넌트를 만들 수는 있지만, JSX 문법을 직접 쓰지 않고 React.createElement() 같은 방식으로 작성해야 함
function add(a, b) {
return a + b;
}- JS: 타입 선언이 없음
.jsx 파일
- JavaScript + JSX 문법을 포함하는 파일
- JSX는 JavaScript XML의 약자로, JS 안에서 HTML처럼 보이는 문법을 쓸 수 있게 해줌
- React 컴포넌트를 작성할 때 직관적으로 UI를 표현 가능
.ts 파일
- TypeScript 일반 파일
- 순수한 TypeScript 코드만 작성할 때 사용
- 함수, 클래스, 로직 등만 포함
function add(a: number, b: number): number {
return a + b;
}- TS: 타입 선언이 있음 (: number, interface, type 등)
.tsx 파일
- TypeScript + JSX 파일
- React 같은 라이브러리에서 JSX 문법을 사용할 때 필요
- JSX는 HTML처럼 보이는 문법을 JS/TS 안에서 쓰는 것
정리하면:
-
.js는 순수 자바스크립트 파일
-
.jsx는 리액트에서 UI를 작성할 때 쓰는 JSX 문법을 포함한 자바스크립트 파일
-
JSX를 쓰지 않는 TypeScript 파일 → .ts
-
JSX를 쓰는 React 컴포넌트 파일 → .tsx
타입스크립트는 언제 쓰냐?
✔ 규모가 커질 때
- 컴포넌트 많아짐
- props 복잡해짐
- API 응답 데이터 구조 많아짐
협업할 때
👉 코드 실수 줄이려고 씀.
type UserProps = {
name: string;
age: number;
};- 누가 봐도 구조가 명확해짐
- IDE 자동완성 잘 됨
- 런타임 에러 줄어듦
그럼 언제 굳이 안 써도 되냐?
- 아주 작은 개인 토이 프로젝트
- 단순한 페이지
- 학습 초기 단계
