React에서 TypeScript 적용하기

hw Y·2024년 6월 24일

1. 프로젝트 생성 및 설정

1-1. Create React App으로 생성하는 경우

대부분의 경우 Create React App을 사용하여 프로젝트를 생성할 때 타입스크립트를 선택할 수 있습니다:

npx create-react-app my-app --template typescript
이 명령을 실행하면 타입스크립트를 기반으로 한 리액트 프로젝트가 생성됩니다.

1-2. 기존 프로젝트에 타입스크립트 추가하는 경우

기존의 JavaScript 기반 리액트 프로젝트에 타입스크립트를 추가하려면 다음 단계를 따릅니다:

타입스크립트 관련 패키지 설치:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

tsconfig.json 파일 설정: 프로젝트 루트에 tsconfig.json 파일을 생성하고 필요한 TypeScript 설정을 추가합니다. 예를 들어, 다음과 같은 최소 설정을 사용할 수 있습니다:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true
  }
}

2. 컴포넌트 작성 및 타입 정의

타입스크립트를 사용하면 각 컴포넌트의 props와 state에 대해 명확하게 타입을 정의할 수 있습니다.

함수형 컴포넌트 (Functional Components)

import React from 'react';

interface Props {
  name: string;
  age: number;
}

const MyComponent: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

클래스형 컴포넌트 (Class Components)

import React, { Component } from 'react';

interface Props {
  name: string;
  age: number;
}

interface State {
  count: number;
}

class MyComponent extends Component<Props, State> {
  state: State = {
    count: 0
  };

  render() {
    const { name, age } = this.props;
    const { count } = this.state;

    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
        <p>Count: {count}</p>
      </div>
    );
  }
}

export default MyComponent;

3. Hooks 사용 시 타입 정의

함수형 컴포넌트에서 Hooks를 사용할 때도 각 Hook에 대한 타입을 정의할 수 있습니다.

import React, { useState } from 'react';

interface Props {
  initialValue: number;
}

const Counter: React.FC<Props> = ({ initialValue }) => {
  const [count, setCount] = useState<number>(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;