작성자: 조광형 | 날짜: 2024년 11월 26일
Introduction
React는 사용자 인터페이스를 구축하기 위한 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. TypeScript는 JavaScript의 상위 집합으로, 정적 타이핑을 지원하여 안정성 및 가독성을 높여줍니다. 이 글에서는 React와 TypeScript를 함께 사용하는 방법, 타입 추론, 고급 타입을 활용하는 방법에 대해 자세히 설명하겠습니다.
1. TypeScript란?
TypeScript는 JavaScript의 슈퍼셋으로, 정적 타이핑을 제공하는 프로그래밍 언어입니다. TypeScript의 주요 목표는 코드의 가독성과 유지 보수성을 높이는 것입니다. TypeScript에서 타입을 명시적으로 지정하지 않더라도, 타입 추론을 통해 변수가 어떤 값으로 초기화되는지를 알아낼 수 있습니다.
2. React 프로젝트에 TypeScript 추가하기
새로운 React 프로젝트를 TypeScript로 설정하는 방법은 다음과 같습니다. create-react-app을 사용할 경우, TypeScript 프로젝트를 만들기 위한 유용한 옵션을 제공받습니다.
npx create-react-app my-app --template typescript위의 명령어를 수행하면 TypeScript를 지원하는 React 기본 프로젝트가 생성됩니다.
3. 기본적인 TypeScript 문법
TypeScript에서 변수, 함수, 인터페이스, 클래스 등을 정의할 때 타입을 명시할 수 있습니다. 아래는 몇 가지 기본적인 예시입니다.
3.1. 변수 선언
let count: number = 0;3.2. 함수 선언
function add(a: number, b: number): number {
return a + b;
}3.3. 인터페이스
interface User {
name: string;
age: number;
}
const user: User = {
name: "John",
age: 30
};4. 리액트 컴포넌트에서의 타입 정의
React 컴포넌트를 정의할 때도 TypeScript의 타입을 활용할 수 있습니다. props와 state의 타입을 정의하여 컴포넌트를 더욱 안전하게 작성할 수 있습니다.
4.1. Functional Component
import React from 'react';
interface Props {
message: string;
}
const Greeting: React.FC = ({ message }) => {
return {message}
;
}; 4.2. Class Component
import React, { Component } from 'react';
interface Props {
name: string;
}
interface State {
age: number;
}
class User extends Component {
state: State = { age: 25 };
render() {
return {this.props.name} is {this.state.age} years old.;
}
} 5. 타입 추론
타입스크립트는 변수의 타입을 코드의 컨텍스트에 따라 추론할 수 있습니다. 코드를 작성할 때 타입을 명시적으로 지정하지 않아도 TypeScript는 적절한 타입을 자동으로 추론합니다.
let num = 2; // TypeScript는 num의 타입을 number로 추론합니다.6. 고급 타입
TypeScript의 고급 타입을 활용하면 더 복잡한 타입을 정의할 수 있습니다. 여기에는 교차 타입, 유니온 타입, 제네릭 등이 포함됩니다.
6.1. 교차 타입 (Intersection Types)
interface Person {
name: string;
}
interface Employee {
employeeId: number;
}
type Worker = Person & Employee;
const worker: Worker = {
name: "Jane",
employeeId: 1234,
};6.2. 유니온 타입 (Union Types)
function logId(id: number | string) {
console.log(`ID: ${id}`);
}
logId(1);
logId("2");6.3. 제네릭 (Generics)
function identity(arg: T): T {
return arg;
}
const output = identity("Hello");
const output2 = identity(42); 7. React와 TypeScript의 조합
React와 TypeScript를 함께 사용하면 코드의 안정성을 높이고, IDE와의 통합을 통해 자동 완성과 오류 감지를 개선할 수 있습니다. 최종적으로 이는 개발 효율성을 높이는 데 기여합니다. 다음은 다양한 React Hooks를 사용할 때의 예시입니다.
7.1. useState 훅
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState(0);
return (
{count}
);
}; 7.2. useEffect 훅
import React, { useEffect } from 'react';
const Example: React.FC = () => {
useEffect(() => {
console.log('Component mounted');
}, []);
return Check the console for logs!;
};8. 결론
React와 TypeScript를 결합하면 강력하고 안정적인 웹 애플리케이션을 개발할 수 있습니다. 타입 추론과 고급 타입 기능을 활용하여 코드의 품질을 높이고, 실제 프로젝트에서 개발 속도를 증가시킬 수 있습니다. 이 글에서 설명한 방법들을 통해 여러분의 React 프로젝트에 TypeScript를 원활하게 통합할 수 있기를 바랍니다.