개요

이전글에서는 React의 핵심 철학과 Vite를 활용해 리액트 프로젝트를 시작하는 방법에 대해 다뤄봤음!
이전글 보러가기🤞

이번엔 그 연장선으로, 프로젝트 생성 시 선택하게 되는 TypeScript 템플릿에 대해 이야기해볼 거임.
TypeScript가 뭐고, 왜 사용하는지, 그리고 JavaScript와 어떤 차이가 있는지도 정리해보려고 함!

---

TypeScript란?

TypeScript는 한마디로 말하면 JavaScript에 타입 기능을 추가한 언어다

기존 JS는 변수에 어떤 타입의 값이 들어가는지 명확하게 알 수 없고, 실행하기 전까지는 오류를 잘 못 잡는 경우가 많았음.
근데 TS는 변수나 함수에 타입을 정해줄 수 있어서 코드 작성할 때부터 오류를 미리 잡을 수 있다

Javascript vs Typescript 코드비교

// JavaScript 예시코드
function add(a, b) {
  return a + b;
}

// TypeScript 예시코드
function add(a: number, b: number): number {
  return a + b;
}

이렇게 타입스크립트로 타입을 지정해준다면, add("1", 2)처럼 잘못된 값을 넘길 때 에디터에서 바로 에러를 알려줘서 런타임 에러를 방지할 수 있음

또한, 타입 정보가 있기 때문에 에디터 자동완성 기능도 훨씬 똑똑하게 동작함.

그래서 대규모 프로젝트, 협업, 유지보수에는 무조건 TS 쓰는 게 좋다고들 함! (실제로 본인 회사 프로젝트도 전부 TS 기반이긴함😁)

Javascript vs Typescript 템플릿 비교

이전글에서 Vite로 React 프로젝트 생성시, JS와 TS중 템플릿을 추가하는 단계가 있었는데 템플릿을 간단히 비교하면 아래와 같다.

템플릿	특징
JavaScript	설정 간단하고 바로 시작 가능함
TypeScript	타입 안정성 높고, 자동완성 도움됨

일단 JS는 진입장벽이 낮아서 빨리 시작할 수 있다는 장점이 있지만, 규모가 커지거나 협업시 타입에러로 인한 문제가 자주 발생함
그래서 첨엔 어렵더라도 Typescript로 시작하는것을 추천받았다

Typescript 템플릿 기반 예시

type HelloProps = {
  name: string;
}

const Hello = ({ name }: HelloProps) => {
  return <h1>안녕 {name}!</h1>;
};

이렇게 props에 타입을 지정해두면
틀린 타입을 넘겼을 때 바로 에러를 알려줌.
나중에 유지보수할 때 진짜 유용하다

Typescript 공식문서

타입스크립트 도입에 대한 더 자세한 개요 등에 대해 살펴보고싶다면 아래의 문서를 꼭 읽어보도록 하자😉

특히 번역본의 번역 퀄리티가 상당히 좋아서 그냥 번역본만 읽어도 타입스크립트의 개요와 문법등에 대해서는 충분히 학습할 수 있을것이다ㅎㅎ

• Typescript HandBook
• Typescript HandBook 번역본 ← 짱추천⭐

[ 👩‍🏫Eazy's SUM ] Typescript란?

• JavaScript에 타입을 추가한 언어로, 코드 작성 시 오류 예방(?)
• 협업과 대규모 프로젝트에서의 유지보수에 유리함
• 타입 안정성과 에디터 자동완성의 도움으로 더욱 효율적인 개발 가능

---

Vite+React+Typescript 생성 프로젝트 확인

프로젝트 구조 확인

본격적으로 Vite에서 React 프로젝트 생성 시 Typescript 템플릿을 선택하면 아래와 같은 폴더 구조로 생성된다.

src/
├── App.tsx
├── main.tsx
...
tsconfig.json

tsconfig.json 확인

이 파일은 TypeScript가 어떻게 동작할지 설정하는 파일이다
처음엔 크게 건들 필요 없지만, 나중에 옵션 바꿔가며 커스터마이징할 수 있음.
예를 들어, strict 모드를 활성화하여 더욱 엄격한 타입 체크를 할 수도 있음.

.tsx 확장자

JSX를 포함한 파일은 .tsx 확장자를 써야 함.
이게 JS에서는 .jsx를 쓰는 거랑 같은 개념임!

cf) 확장자 비교 : .js, .jsx, ts, .tsx

혹시 리액트에서 js확장자와 jsx확장자의 차이를 모를 수 있기에 간단하게만 정리해보겠음

차이점

확장자	설명
.js	일반 자바스크립트 파일. JSX 문법을 사용하지 않는 경우에 사용
.jsx	자바스크립트 기반이지만, JSX 문법(HTML처럼 보이는 React 요소) 을 사용하는 경우에 사용
.ts	타입스크립트 파일. JSX 문법이 포함되지 않은 일반 TS 파일에 사용
.tsx	타입스크립트 + JSX 문법을 함께 사용하는 경우에 사용

리액트 컴포넌트 코드에서 JSX를 사용하면, TypeScript는 .tsx 확장자를 필요로 함.

사용 위치 비교

상황	사용할 확장자
React 컴포넌트인데 JS 기반일 때	.jsx
React 컴포넌트인데 TypeScript 기반일 때	.tsx
유틸 함수, API 호출 등 리액트와 무관한 일반 JS/TS 파일	.js 또는 .ts

예시

// Header.jsx
const Header = () => {
  return <header>헤더내용</header>;
};

export default Header;

→ JSX 문법이 포함되어 있으니 .jsx 사용

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString();
}

→ JSX 없이 순수 함수니까 .js 사용

// types.ts
export type User = {
  name: string;
  age: number;
}

→ 타입 정의만 있으므로 .ts 사용

// Profile.tsx
type Props = {
  name: string;
};

const Profile = ({ name }: Props) => {
  return <div>{name}의 프로필</div>;
};

export default Profile;

→ JSX + 타입스크립트 함께 사용하므로 .tsx

[ 👩‍🏫Eazy's SUM ] Typescript기반 리액트 프로젝트 생성시 유의 사항

• .tsx 확장자를 사용해 JSX 코드가 포함된 파일을 작성해야 함 (파일의 성질을 이해하고 올바른 확장명을 작성해야함)
• tsconfig.json 파일을 통해 타입스크립트 설정을 관리할 수 있음

---

마치며

처음엔 TypeScript가 괜히 복잡하고 귀찮게 느껴질 수도 있다
근데 프로젝트가 커질수록, 그리고 다른 사람이랑 같이 코딩할수록 TS의 이점에 대해 확연하게 느껴진다고 함
지금 프로젝트에서는 아무생각 없이 TS기반으로 작업하고있지만 조금 더 명확하게 알고 쓰는 Eazy연이 되길 바라며~..