Typescript 정리 및 마무리

React와 TypeScript로 컴포넌트 타입 설정 및 Context 사용하기

React와 TypeScript를 함께 사용하면 컴포넌트와 상태를 더 안전하고 명확하게 관리할 수 있다. 이번 포스팅에서는 타입 모델 설정, React.FC 사용법, 컴포넌트에서 props를 전달하고 사용하는 방법, 그리고 useContext와 TypeScript를 조합하는 방법을 알아본다.

---

1. 타입 모델 설정

TypeScript를 사용할 때 가장 먼저 해야 할 작업은 데이터 구조에 대한 타입을 정의하는 것이다. 이는 컴포넌트의 props나 상태 관리에 큰 도움이 된다.

• 타입 정의 예제

type User = {
  id: number;
  name: string;
  email: string;
};

type Product = {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
};

위처럼 type 키워드를 사용하여 데이터 모델을 정의할 수 있다. TypeScript는 또한 interface를 지원하며, 두 방법 모두 프로젝트 요구 사항에 맞게 선택할 수 있다.

• 인터페이스 예제

interface User {
  id: number;
  name: string;
  email: string;
}

type과 interface는 유사하지만, interface는 확장이 가능하다는 점에서 차이가 있다.

---

2. React.FC에 대한 설명

React.FC는 React에서 제공하는 타입으로, 함수형 컴포넌트(Function Component)를 정의할 때 사용된다. React.FC를 사용하면 컴포넌트의 props 타입을 명시적으로 정의할 수 있어 개발 중 에러를 방지할 수 있다.

• React.FC 기본 형태

import React from "react";

const MyComponent: React.FC = () => {
  return <div>Hello, World!</div>;
};

• React.FC의 특징
  • props의 타입을 자동으로 추론한다.
  • children 프로퍼티를 기본적으로 포함한다.
  • 코드가 더 명확해지고 오류를 줄일 수 있다.

---

3. React.FC를 사용한 타입 설정

React.FC를 사용할 때 props의 타입을 설정하는 방법은 다음과 같다.

A. 기본적인 props 타입 설정

type Props = {
  title: string;
  isActive: boolean;
};

const Header: React.FC<Props> = ({ title, isActive }) => {
  return (
    <header>
      <h1>{title}</h1>
      {isActive && <p>Active</p>}
    </header>
  );
};

B. props 타입과 함수 포함

컴포넌트에 함수를 props로 전달할 때도 타입을 명시해야 한다.

type Props = {
  title: string;
  onClick: () => void; // 함수 타입 설정
};

const Button: React.FC<Props> = ({ title, onClick }) => {
  return <button onClick={onClick}>{title}</button>;
};

• onClick은 매개변수가 없고 반환값도 없는 함수로 설정된다.
• 함수의 타입을 설정할 때, 매개변수와 반환 타입을 명확히 작성해야 한다.

---

4. 컴포넌트에 props를 전달하고 사용하는 방법

React 컴포넌트에 props를 전달하고 사용하는 방법은 간단하다.

A. 부모 컴포넌트에서 props 전달

const App = () => {
  return <Header title="Welcome!" isActive={true} />;
};

B. 자식 컴포넌트에서 props 사용

const Header: React.FC<{ title: string; isActive: boolean }> = ({ title, isActive }) => {
  return (
    <header>
      <h1>{title}</h1>
      {isActive && <p>Active</p>}
    </header>
  );
};

---

5. useContext와 TypeScript

useContext는 React에서 전역 상태를 관리할 때 사용하는 훅이다. TypeScript와 함께 사용하면 컨텍스트 값의 타입을 명확히 정의할 수 있다.

A. Context와 기본 타입 설정

먼저, Context의 데이터를 위한 타입을 정의한다.

type Theme = {
  color: string;
  background: string;
};

const ThemeContext = React.createContext<Theme | undefined>(undefined);

• ThemeContext는 Theme 타입을 기반으로 생성되었다.
• 기본값으로 undefined를 설정하여 컨텍스트 사용 전 검증을 강제할 수 있다.

B. Provider 설정

컨텍스트 값을 제공하는 Provider를 설정한다.

const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const theme: Theme = {
    color: "white",
    background: "black",
  };

  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
};

C. Context 값 사용

useContext 훅을 사용하여 컨텍스트 값을 가져온다.

const ThemedComponent: React.FC = () => {
  const theme = React.useContext(ThemeContext);

  if (!theme) {
    throw new Error("ThemedComponent must be used within a ThemeProvider");
  }

  return (
    <div style={{ color: theme.color, background: theme.background }}>
      Themed Component
    </div>
  );
};

D. 최종 구조

const App: React.FC = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

---

결론

React와 TypeScript를 함께 사용하면 컴포넌트와 상태 관리를 더 안전하고 명확하게 작성할 수 있다.

1. 타입 모델 설정: 데이터 구조를 명확히 정의하여 코드 안정성을 높인다.
2. React.FC 활용: 컴포넌트의 props 타입을 명확히 정의할 수 있다.
3. useContext와 TypeScript 조합: 전역 상태 관리 시 타입을 명시적으로 설정하여 오류를 방지한다.

React와 TypeScript의 조합은 특히 대규모 프로젝트나 협업에서 생산성과 유지보수성을 크게 향상시킬 수 있다. 🚀