React 컴포넌트와 타입스크립트 통합

import { Component } from 'react';

npm create vite@latest my-react-ts-app -- --template react-ts
cd my-react-ts-app
npm install
npm run dev

npm install --save-dev typescript @types/react @types/react-dom @types/jest

import React from 'react';

// 1. Props 타입을 인터페이스로 정의
interface WelcomeMessageProps {
  name: string;
  age?: number; // 선택적 Props
  isVisible: boolean;
  onButtonClick: (message: string) => void; // 함수 Props
}

// 2. React.FC (Function Component) 타입을 사용하여 컴포넌트 정의
//    @types/react 18 이후 FC는 children을 암묵적으로 추가하지 않습니다.
//    children을 받으려면 Props에 명시하거나 PropsWithChildren을 사용합니다.
const WelcomeMessage: React.FC<WelcomeMessageProps> = ({ name, age, isVisible, onButtonClick }) => {
  if (!isVisible) {
    return null;
  }

  const handleClick = () => {
    onButtonClick(`Hello, ${name}!`);
  };

  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
      <button onClick={handleClick}>Say Hello</button>
    </div>
  );
};

export default WelcomeMessage;

import React from 'react';

interface WelcomeMessageProps {
  name: string;
  age?: number;
  isVisible: boolean;
  onButtonClick: (message: string) => void;
  children?: React.ReactNode; // children을 사용하려면 명시적으로 추가
}

// React.FC를 사용하지 않고 직접 Props 타입 명시 (권장)
const WelcomeMessageV2 = ({ name, age, isVisible, onButtonClick, children }: WelcomeMessageProps) => {
  if (!isVisible) {
    return null;
  }

  const handleClick = () => {
    onButtonClick(`Hello, ${name}!`);
  };

  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
      <button onClick={handleClick}>Say Hello</button>
      {children && <p>{children}</p>}
    </div>
  );
};

export default WelcomeMessageV2;

import React, { useState } from 'react';

const Counter: React.FC = () => {
  // 1. 타입 추론에 의존: 초기값이 number이므로 count는 number 타입으로 추론됩니다.
  const [count, setCount] = useState(0);

  // 2. 명시적으로 타입 지정: 초기값이 null이거나 복잡한 객체일 때 유용합니다.
  interface User {
    id: number;
    name: string;
  }
  const [user, setUser] = useState<User | null>(null); // user는 User 또는 null 타입

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

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  const fetchUser = () => {
    // 비동기 작업 시뮬레이션
    setTimeout(() => {
      setUser({ id: 1, name: 'Alice' });
    }, 1000);
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>

      <h3>User Info:</h3>
      <button onClick={fetchUser}>Fetch User</button>
      {user ? (
        <p>User ID: {user.id}, Name: {user.name}</p>
      ) : (
        <p>No user data.</p>
      )}
    </div>
  );
};

export default Counter;

import React, { useState } from 'react';

const InputField: React.FC = () => {
  const [value, setValue] = useState('');

  // ChangeEvent<HTMLInputElement> 타입 명시
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  // MouseEvent<HTMLButtonElement> 타입 명시
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    alert(`Current value: ${value}`);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} placeholder="Type something..." />
      <button onClick={handleClick}>Show Value</button>
      <p>Input: {value}</p>
    </div>
  );
};

export default InputField;

import React, { Component } from 'react';

// Props 타입 정의
interface ClassBasedCounterProps {
  initialCount?: number;
  title: string;
}

// State 타입 정의
interface ClassBasedCounterState {
  count: number;
}

// Component<Props, State> 제네릭을 사용하여 타입 명시
class ClassBasedCounter extends Component<ClassBasedCounterProps, ClassBasedCounterState> {
  // defaultProps는 static 속성으로 정의하여 선택적 Props의 기본값을 제공
  static defaultProps = {
    initialCount: 0,
  };

  constructor(props: ClassBasedCounterProps) {
    super(props);
    this.state = {
      count: props.initialCount || 0, // defaultProps를 사용하더라도, constructor에서는 직접 접근해야 합니다.
    };
  }

  // 메서드도 타입을 명시할 수 있습니다.
  private increment = (): void => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  private decrement = (): void => {
    this.setState(prevState => ({ count: prevState.count - 1 }));
  };

  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <h3>Count: {this.state.count}</h3>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

export default ClassBasedCounter;

import React from 'react';
import WelcomeMessage from './components/WelcomeMessage';
import Counter from './components/Counter';
import ClassBasedCounter from './components/ClassBasedCounter';
import WelcomeMessageV2 from './components/WelcomeMessageV2'; // React.FC 대신 함수 인자에 Props 타입 직접 명시 버전

const App: React.FC = () => {
  const handleWelcomeButtonClick = (message: string) => {
    alert(`Button clicked! Message: ${message}`);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React with TypeScript Examples</h1>

      <hr />
      <h2>Welcome Message Component (React.FC)</h2>
      {/* 필수 Props 'name'과 'isVisible'을 제공해야 합니다. */}
      <WelcomeMessage
        name="TypeScript User"
        age={25}
        isVisible={true}
        onButtonClick={handleWelcomeButtonClick}
      />
      {/*
      // 컴파일 에러 예시: 필수 Props 누락
      <WelcomeMessage name="Guest" />
      // Property 'isVisible' is missing in type '{ name: string; }'
      // but required in type 'WelcomeMessageProps'.
      */}
      {/*
      // 컴파일 에러 예시: 잘못된 Props 타입
      <WelcomeMessage name={123} isVisible={true} onButtonClick={() => {}} />
      // Type 'number' is not assignable to type 'string'.
      */}

      <hr />
      <h2>Welcome Message Component (Function Component with explicit Props)</h2>
      <WelcomeMessageV2
        name="Explicit Type User"
        isVisible={true}
        onButtonClick={handleWelcomeButtonClick}
      >
        This is a children prop passed to WelcomeMessageV2.
      </WelcomeMessageV2>

      <hr />
      <h2>Counter Component (Functional)</h2>
      <Counter />

      <hr />
      <h2>Class-based Counter Component</h2>
      <ClassBasedCounter
        title="Class Counter Example"
        initialCount={100}
      />
    </div>
  );
};

export default App;

{age !== undefined && <p>You are {age} years old.</p>}