17 React와 TypeScript 사용하기: TypeScript로 React 컴포넌트 타입 지정법

 React는 자바스크립트로 애플리케이션을 만드는 라이브러리이지만, TypeScript와 결합하면 더욱 강력한 개발 환경을 제공합니다. TypeScript는 정적 타입 검사 기능을 통해 코드 오류를 미리 발견하고, 더 안전하고 유지 보수가 용이한 코드를 작성할 수 있게 해줍니다. 이번 글에서는 React와 TypeScript를 함께 사용할 때의 기본적인 타입 지정법과 props와 state에 타입을 적용하는 방법을 설명하겠습니다.

1. TypeScript란 무엇인가?

TypeScript는 JavaScript의 상위 집합으로, JavaScript에 정적 타입을 추가한 언어입니다. 즉, 변수나 함수의 타입을 명시적으로 지정할 수 있습니다. React 애플리케이션에서 TypeScript를 사용하면, 코드 작성 시 타입 오류를 미리 확인할 수 있어 개발 효율이 크게 향상됩니다.

React와 TypeScript를 함께 사용하면, React 컴포넌트에 명확한 타입을 지정하고, props와 state에 대해 타입 검사를 할 수 있어, 코드가 더 안전하고 예측 가능해집니다.

2. TypeScript에서의 기본적인 타입 지정법

TypeScript에서 변수를 선언할 때는 let이나 const 뒤에 변수의 타입을 지정할 수 있습니다. 예를 들어, 문자열 타입을 지정하려면 string을, 숫자 타입을 지정하려면 number를 사용합니다.

a. 기본 타입 지정 예시

let username: string = "John";
let age: number = 30;
let isActive: boolean = true;

3. React 컴포넌트에서 props와 state 타입 지정하기

React에서는 props와 state를 사용하는데, TypeScript를 활용하면 이들에 대해 명확한 타입을 지정할 수 있습니다. 아래에서는 React 컴포넌트에 props와 state에 타입을 지정하는 방법을 설명합니다.

a. 함수형 컴포넌트에서 props 타입 지정하기

TypeScript에서 props의 타입을 지정할 때는 인터페이스(interface)를 사용합니다. interface를 사용하면 props에 들어가는 데이터의 타입을 정의할 수 있습니다.

import React from "react";

// props의 타입 정의
interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age} years old</p>
    </div>
  );
};

export default MyComponent;

위 예시에서 MyComponentProps 인터페이스는 컴포넌트의 props에 대해 name과 age의 타입을 각각 string과 number로 지정하고 있습니다. 이 타입은 컴포넌트 내부에서 자동으로 검사되며, 잘못된 타입을 전달하려고 하면 TypeScript가 오류를 표시해줍니다.

b. 클래스형 컴포넌트에서 props 타입 지정하기

클래스형 컴포넌트에서도 props 타입을 지정할 수 있습니다. 클래스형 컴포넌트에서는 React.Component를 상속받을 때 props와 state에 대한 타입을 제네릭으로 지정합니다.

import React, { Component } from "react";

// props의 타입 정의
interface MyComponentProps {
  name: string;
  age: number;
}

// state의 타입 정의
interface MyComponentState {
  count: number;
}

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  constructor(props: MyComponentProps) {
    super(props);
    this.state = { count: 0 };
  }

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

    return (
      <div>
        <h1>{name}</h1>
        <p>{age} years old</p>
        <button>{count}</button>
      </div>
    );
  }
}

export default MyComponent;

이 예시에서 MyComponent는 MyComponentProps와 MyComponentState 인터페이스를 사용하여 각각 props와 state의 타입을 지정하고 있습니다. 이를 통해 컴포넌트의 타입 안전성을 높일 수 있습니다.

c. useState 훅에서 타입 지정하기

React의 useState 훅을 사용할 때도 타입을 지정할 수 있습니다. 기본적으로 useState는 제네릭 타입을 받을 수 있는데, 이를 통해 상태의 타입을 명확히 정의할 수 있습니다.

import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0); // 상태의 타입 지정

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

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

export default Counter;

위 예시에서 useState<number>(0)를 사용하여 count 상태의 타입을 number로 지정하고 있습니다. 이렇게 타입을 지정함으로써, 상태를 잘못 업데이트할 때 발생할 수 있는 오류를 미리 방지할 수 있습니다.

4. 타입 안전성을 높이기 위한 추가 팁

TypeScript를 사용할 때 타입 안전성을 높이기 위한 몇 가지 팁을 소개합니다.

• null과 undefined 처리: 타입을 지정할 때 null이나 undefined를 명시적으로 처리해야 할 경우, | null이나 | undefined를 추가하여 명시적인 처리가 필요합니다.

  
  interface MyComponentProps {
    name: string | null;
  }
  

• 함수의 타입 지정: 함수의 매개변수와 반환값의 타입을 명확히 지정하는 것이 좋습니다. 함수의 반환값도 반드시 타입을 지정해주어야 합니다.

  
  const add = (a: number, b: number): number => a + b;
  

5. 결론

React와 TypeScript를 함께 사용하면, 코드 작성 시 더 나은 타입 안전성과 오류 방지 효과를 얻을 수 있습니다. TypeScript를 사용하여 props와 state의 타입을 명확하게 지정함으로써, 코드의 가독성과 유지보수성을 높일 수 있습니다. React와 TypeScript의 조합은 특히 큰 규모의 애플리케이션에서 매우 유용하게 사용될 수 있습니다. 초보자라도 TypeScript의 기본적인 타입 지정법을 이해하고 적용하면, 더 안전하고 효율적인 React 애플리케이션을 만들 수 있습니다.

이 글을 통해 React와 TypeScript의 기본적인 타입 지정법과 props와 state에 타입을 적용하는 방법을 이해할 수 있었기를 바랍니다.