[TypeScript] TSX: TypeScript와 React의 만남 🌀

TSX 톺아보기! 🌀

TSX(TypeScript + JSX)는 TypeScript와 JSX(JavaScript XML)를 결합한 형태로, TypeScript의 정적 타입 검사와 React의 컴포넌트 기반 개발을 동시에 즐길 수 있는 문법입니다. React 프로젝트에서 TSX를 활용하면, 강력한 타입 안정성과 코드 품질을 확보할 수 있어요.

 

이번 글에서는 TSX의 기본 개념부터 설정, 주의사항, 그리고 실무에서 마주칠 수 있는 에러와 해결 방법까지 한 번에 알아봅시다! 🛠️

---

TSX란? 🤔

TSX는 React 컴포넌트에서 TypeScript의 타입 검사와 JSX 문법을 동시에 사용하는 파일 형식입니다.

.tsx 확장자를 사용하며, React 컴포넌트 개발에 필수적입니다.

• JSX가 HTML과 비슷한 문법으로 UI를 표현한다면, TSX는 여기에 타입 안정성을 더합니다.
• TypeScript의 정적 타입 검사로 컴파일 단계에서 오류를 잡아낼 수 있어, 안정적인 React 코드를 작성할 수 있습니다.

---

TSX 설정하기 🛠️

TSX를 사용하려면 TypeScript와 React 프로젝트를 설정해야 합니다.

1. 프로젝트 초기화

(1) 새 React 프로젝트 생성:

# npm
npx create-react-app my-app --template typescript

#yarn
yarn create react-app todo-app --template typescript

 

이 명령은 TypeScript 설정이 포함된 React 프로젝트를 생성합니다.

 

(2) 수동 설정하기: 기존 React 프로젝트에 TypeScript 추가

# npm
npm install typescript @types/react @types/react-dom

# yarn
yarn add typescript @types/react @types/react-dom

# yarn devDependencies로 설치 시
yarn add typescript @types/react @types/react-dom -D

 

이제 .ts와 .tsx 파일을 사용할 준비가 되었습니다.

 

2. TypeScript 설정 (tsconfig.json)

TypeScript 설정 파일인 tsconfig.json에서 TSX를 활성화하려면 다음과 같이 설정합니다:

{
  "compilerOptions": {
    "jsx": "react", // JSX 문법 사용
    "strict": true, // 엄격한 타입 검사
    "esModuleInterop": true, // ES 모듈 호환성
    "moduleResolution": "node", // 모듈 해석
    "target": "ES6", // 컴파일 대상
    "module": "ES6", // 모듈 형식
    "skipLibCheck": true // 라이브러리 타입 검사 건너뛰기
  }
}

---

TSX 기본 문법 🌟

1. 기본 React 컴포넌트 작성

type Props = {
  name: string;
};

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

export default Welcome;

 

2. 이벤트 핸들링

const Button: React.FC = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log("Button clicked!", event);
  };
  return <button onClick={handleClick}>Click Me</button>;
};

 

3. 컴포넌트 상태 관리

React의 상태를 관리하면서 타입을 지정합니다.

import { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

---

TSX의 장점 💡

1. 정적 타입 검사
   • 컴파일 단계에서 오류를 미리 잡아내어 안정적인 코드를 보장합니다.
2. IDE 지원
   • 자동 완성, 코드 네비게이션, 실시간 오류 감지를 통해 개발 생산성을 높입니다.
3. 명확한 인터페이스
   • Props와 State에 타입을 지정하면 컴포넌트 간 데이터 흐름이 명확해집니다.

---

TSX 사용 시 주의사항 ⚠️

1. Props와 State에 명확한 타입 지정

Props와 State의 타입을 지정하지 않으면 타입 안정성이 깨질 수 있습니다. 항상 명시적으로 타입을 지정하세요.

type Props = {
  name: string;
};

 

2. 이벤트 타입 처리

React의 이벤트 타입은 DOM 이벤트와 다를 수 있습니다. 아래는 주로 사용하는 이벤트 타입입니다:

• React.ChangeEvent<HTMLInputElement>: 입력 값이 변경될 때
• React.MouseEvent<HTMLButtonElement>: 버튼 클릭 이벤트
• React.FormEvent<HTMLFormElement>: 폼 제출 이벤트

3. 기본 HTML 속성 타입

React는 모든 HTML 속성에 대한 타입을 제공합니다.

const Link: React.FC = () => {
  return <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a>;
};

 

4. ForwardRef 사용

컴포넌트에서 Ref를 전달하려면 React.forwardRef를 사용하세요.

import React, { forwardRef } from "react";

type InputProps = {
  placeholder: string;
};

const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
  <input ref={ref} placeholder={props.placeholder} />
));

export default Input;

---

실무에서 자주 마주치는 에러와 해결법 🛠️

1. Property 'x' is missing in type 에러

• 원인: Props 타입을 지정했으나, 필요한 속성을 전달하지 않았을 때 발생합니다.
• 해결: 누락된 속성을 추가하거나, 옵셔널 속성(?)으로 지정하세요.

type Props = {
  name?: string; // Optional
};

 

2. Cannot find name 'React'

• 원인: TypeScript 설정에서 JSX를 사용할 준비가 되지 않았습니다.
• 해결: tsconfig.json에서 jsx 옵션을 확인하세요.

"jsx": "react-jsx"

 

3. Type 'undefined' is not assignable

• 원인: State 또는 Props에 타입을 지정하지 않아, undefined 타입이 포함된 경우 발생합니다.
• 해결: 기본값을 설정하거나 타입을 명확히 지정합니다.

const [value, setValue] = useState<string>(""); // 기본값 설정

---

TSX로 생산성 높이기 💻

1. 제네릭 활용

• 다양한 데이터 타입을 처리하는 컴포넌트 작성에 유용합니다.

type ListProps<T> = {
  items: T[];
  render: (item: T) => JSX.Element;
};

const List = <T,>({ items, render }: ListProps<T>) => (
  <ul>{items.map(render)}</ul>
);

 

2. 유틸리티 타입 활용

• TypeScript의 내장 유틸리티 타입을 사용해 타입을 간소화합니다.

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

type UserPreview = Pick<User, "name">; // 'id' 제외

---

마무리: TSX로 더 안전하고 생산적으로! 🛡️

TSX는 React 프로젝트에서 타입 안전성과 유지보수성을 높이는 데 필수적인 도구입니다. 적절한 설정과 타입 지정으로 실수를 줄이고, 효율적인 협업을 가능하게 합니다. React와 TypeScript의 강력한 조합으로, 전설적인 개발자의 길을 걸어 보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷