React와 TypeScript 사용하기, TypeScript의 기본 개념과 리액트에서의 사용

웹 개발에 있어서 JavaScript의 사용은 널리 퍼져 있습니다. 그러나 JavaScript는 동적 타이핑 언어이기 때문에 대형 애플리케이션을 개발할 경우 타입 관련 오류가 발생할 가능성이 높습니다. 이러한 문제를 해결하기 위해 Microsoft에서 개발한 TypeScript가 등장했습니다. TypeScript는 정적 타입을 지원하며 JavaScript의 상위 집합으로, React와 함께 사용할 경우 더욱 강력한 도구가 됩니다. 본 글에서는 TypeScript의 기본 개념과 React에서의 활용 방안에 대해 자세히 설명하겠습니다.

1. TypeScript란?

TypeScript는 JavaScript에 타입 시스템을 추가한 프로그래밍 언어입니다. 이는 개발자들이 코드에 타입을 명시함으로써 더 나은 IDE 지원(자동 완성, 리팩토링, 타입 검사 등)을 받고, 코드의 가독성을 높일 수 있게 해줍니다. TypeScript는 JavaScript로 컴파일되기 때문에 기존의 JavaScript 코드와의 호환성 문제가 없습니다.

1.1 TypeScript의 주요 특징

정적 타입 검사: TypeScript는 코드가 실행되기 전에 타입 오류를 발견할 수 있습니다.
상속 및 인터페이스: TypeScript는 객체지향 프로그래밍을 지원하며, 상속과 인터페이스를 통해 코드의 재사용성을 높일 수 있습니다.
모듈화: TypeScript는 ES6 모듈 시스템을 지원하여, 모듈당 단일 파일의 구조로 코드를 잘 관리할 수 있습니다.
개선된 IDE 지원: 타입 정보를 통해 많은 IDE에서 코드 자동 완성 및 오류 검사를 지원하여 개발 생산성을 극대화할 수 있습니다.

2. TypeScript 기본 개념

TypeScript의 기본 개념을 이해하기 위해, 다음과 같은 몇 가지 주요 요소를 살펴보겠습니다.

2.1 기본 타입

TypeScript는 다음과 같은 기본 타입을 지원합니다: string, number, boolean, void, null, undefined, any 등의 타입이 있습니다. 각 타입의 사용 예시는 다음과 같습니다.

let name: string = "John Doe";
let age: number = 30;
let hasJob: boolean = true;

2.2 배열 및 튜플

TypeScript에서는 배열과 튜플 타입을 정의할 수 있습니다. 배열은 T[] 또는 Array<T> 형식으로 정의할 수 있으며, 튜플은 고정된 수의 타입을 가질 수 있는 배열입니다.

let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["Hello", 42];

2.3 객체 타입

TypeScript에서는 객체 타입을 정의할 수 있으며, 이를 통해 객체의 구조를 명시할 수 있습니다.

let person: { name: string; age: number } = {
    name: "Alice",
    age: 25,
};

2.4 인터페이스

인터페이스는 객체의 구조를 정의하는 방법입니다. 이를 통해 코드의 재사용성을 높일 수 있습니다.

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

let person: Person = { name: "Bob", age: 35 };

2.5 클래스와 상속

TypeScript는 클래스를 지원하며, 상속을 통해 코드의 재사용성을 높일 수 있습니다.

class Animal {
    constructor(public name: string) {}
}

class Dog extends Animal {
    bark() {
        console.log("Woof! My name is " + this.name);
    }
}

let dog = new Dog("Rex");
dog.bark(); // Woof! My name is Rex

3. React에서 TypeScript 사용하기

React 애플리케이션을 구축할 때 TypeScript를 함께 사용하는 경우, 여러 가지 이점이 있습니다. 특히 컴포넌트의 props와 state에 대해 명확한 타입을 정의함으로써 코드의 가독성과 안정성을 높일 수 있습니다.

3.1 TypeScript와 Create React App

Create React App을 사용하여 TypeScript 환경에서 React 애플리케이션을 구축할 수 있습니다. 다음 명령어를 사용하여 TypeScript 템플릿을 설정할 수 있습니다.

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

3.2 컴포넌트의 Props와 State 타입 정의하기

React 컴포넌트를 작성할 때, props와 state의 타입을 정의할 수 있습니다. 다음은 간단한 예제입니다.

import React from "react";

interface Props {
    title: string;
    isActive: boolean;
}

const MyComponent: React.FC = ({ title, isActive }) => {
    return (
        
            {title}
            {isActive ? "Active" : "Inactive"}
        
    );
};

export default MyComponent;

3.3 useState 및 useEffect의 타입 지정하기

useState와 useEffect 훅을 사용할 때 타입을 지정할 수 있습니다.

import React, { useState, useEffect } from "react";

const MyComponent: React.FC = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            setCount((c) => c + 1);
        }, 1000);
        return () => clearInterval(timer);
    }, []);

    return {count};
};

export default MyComponent;

3.4 이벤트 핸들러의 타입 정의하기

TypeScript에서는 이벤트 핸들러의 타입을 정의할 수 있습니다. 예를 들어, 마우스 클릭 이벤트의 경우 다음과 같이 타입을 정의할 수 있습니다.

const MyComponent: React.FC = () => {
    const handleClick = (event: React.MouseEvent) => {
        console.log("Button clicked");
    };

    return ;
};

4. TypeScript와 React의 장점

TypeScript와 React를 결합하여 사용할 때 여러 가지 장점을 누릴 수 있습니다. 그 중 몇 가지를 살펴보겠습니다.

안정성: 정적 타입 검사를 통해 런타임 오류를 사전에 방지할 수 있습니다.
유지보수성: 코드가 명확하게 타입을 정의하고 있어, 팀원들이 코드를 쉽게 이해하고 수정할 수 있습니다.
강력한 도구 지원: IDE에서의 자동 완성과 오류 검사가 개선되어 개발 효율이 증가합니다.

5. 타입 정의를 통한 더 나은 개발 경험

TypeScript를 통해 보다 좋은 개발 경험을 제공하기 위해, 다음과 같은 패턴을 고려할 수 있습니다.

5.1 유니언 타입

유니언 타입을 통해 여러 타입을 하나의 변수에 지정할 수 있습니다.

let id: string | number;
id = "ABC123"; // valid
id = 123; // valid

5.2 제네릭(Generic)

제네릭을 사용하여 다양한 타입에 대해 유연성을 제공할 수 있습니다.

function identity(arg: T): T {
    return arg;
}

let output = identity("Hello"); // output: string

5.3 타입 추론

TypeScript는 타입 선언 없이도 변수가 초기화될 때, 타입을 추론합니다.

let num = 10; // inferred type is number

6. 결론

TypeScript는 JavaScript의 강력한 확장으로, React와 결합하여 매우 안정적이고 유지보수가 용이한 애플리케이션 개발을 가능하게 합니다. TypeScript의 다양한 기능을 활용하여 더 나은 개발 환경을 조성하고, 팀원 간의 협업 시에 발생할 수 있는 타입 관련 오류를 사전에 방지할 수 있습니다. 앞으로의 웹 개발에서 TypeScript의 사용은 점점 더 증가할 것으로 보입니다. 그럼 여러분의 React 애플리케이션에서도 TypeScript를 적극 활용해 보시기 바랍니다!