[React] TypeScript로 React 개발 완전 정복하기! 🚀

React 개발에서 TypeScript는 안전성과 가독성을 모두 제공하는 강력한 도구입니다. 이번 글에서는 TypeScript를 사용해 React 애플리케이션을 개발할 때 필요한 타입 정의와 활용 방법을 살펴보고, 실질적인 예제를 통해 이를 익혀보겠습니다. 💡

반응형

1. TypeScript란? 📝

TypeScript는 JavaScript의 상위 집합 언어로, 정적 타입을 제공합니다. 이를 통해 코드를 작성할 때 타입 오류를 미리 방지할 수 있어 유지보수가 훨씬 용이합니다.

장점:

• 코드 안정성 증가
• 자동 완성과 타입 추론으로 생산성 향상
• 큰 규모의 애플리케이션에서도 신뢰할 수 있는 코드 제공

단점:

• 학습 곡선이 있을 수 있음
• 초기 설정이 필요함

2. React에서 TypeScript 시작하기 🔧

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

설정 방법:

1. 새 프로젝트 생성:
2. npx create-react-app my-app --template typescript
3. 기존 프로젝트에 추가:
4. npm install --save typescript @types/react @types/react-dom

프로젝트가 설정되면 .tsx 확장자를 사용해 React 컴포넌트를 작성할 수 있습니다.

3. 기본 타입 정의 ✏️

TypeScript로 React 컴포넌트를 작성할 때 가장 기본적인 타입 정의는 Props를 사용하는 것입니다.

예제 코드: 기본 타입 정의

import React from 'react';

type GreetingProps = {
  name: string;
  age?: number;
};

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <p>Hello, {name}!</p>
      {age && <p>Age: {age}</p>}
    </div>
  );
};

export default Greeting;

설명:

• name: 필수 문자열 프로퍼티.
• age: 선택적 숫자 프로퍼티(? 사용).
• React.FC: 함수형 컴포넌트를 위한 타입.

4. 상태와 이벤트 핸들러 타입 정의 🎛️

React 컴포넌트에서 상태 관리와 이벤트 핸들러에도 타입을 정의할 수 있습니다.

예제 코드: 상태와 이벤트 핸들러 타입 정의

import React, { useState } from 'react';

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

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setCount(count + 1);
  };

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

export default Counter;

설명:

• useState<number>: 상태의 타입을 명시.
• React.MouseEvent<HTMLButtonElement>: 이벤트 핸들러의 타입.

5. 복잡한 데이터 구조의 타입 정의 📦

복잡한 데이터 구조를 다룰 때는 인터페이스나 타입 별칭을 사용합니다.

예제 코드: 데이터 구조 타입 정의

import React from 'react';

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

type TodoListProps = {
  todos: Todo[];
  toggleTodo: (id: number) => void;
};

const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
          </label>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

설명:

• Todo: 각 할 일 항목의 타입.
• TodoListProps: todos 배열과 toggleTodo 함수의 타입.

6. Context와 TypeScript 활용하기 🗂️

TypeScript로 Context를 정의하고 활용하면 전역 상태 관리가 더욱 안전해집니다.

예제 코드: Context 정의

import React, { createContext, useContext, useState } from 'react';

type Theme = 'light' | 'dark';

type ThemeContextType = {
  theme: Theme;
  toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = useState<Theme>('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

export default ThemeProvider;

설명:

• Theme: 가능한 테마 값.
• ThemeContextType: Context에서 제공하는 값의 타입.
• useTheme: Context를 쉽게 사용할 수 있도록 만든 커스텀 훅.

7. 마무리 🎉

TypeScript는 React와 결합할 때 강력한 도구로, 안전한 코드를 작성하고 생산성을 높이는 데 큰 도움을 줍니다. 이번 글에서 소개한 타입 정의와 예제를 참고하여 더 나은 React 애플리케이션을 만들어보세요! 💪

TypeScript와 함께하는 React 개발, 이제 두렵지 않죠? 지금 바로 프로젝트에 적용해보세요! 🚀