React로 TypeScript 익히기: 단계별 가이드

??‍♀️ 소개

TypeScript는 JavaScript에 정적 타이핑을 추가하여 잠재적인 버그가 실행되기 전에 잡아내는 데 도움이 됩니다. React와 함께 사용하면 TypeScript는 유형 안전성을 강화하여 구성 요소를 향상시킵니다. 이 글에서는 TypeScript를 React와 함께 사용하기 위한 필수 개념을 살펴보겠습니다.

---

⚛️ React에서 TypeScript를 사용하는 방법은 무엇입니까?

먼저 React 프로젝트에 TypeScript를 설치해야 합니다. 처음부터 시작하는 경우 TypeScript를 활성화하여 새 React 앱을 만드세요.

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

기존 프로젝트의 경우 다음을 실행하여 TypeScript를 추가할 수 있습니다.

npm install typescript @types/react @types/react-dom

이제 .js 또는 .jsx 대신 .tsx 파일을 사용할 수 있으며 React 구성 요소는 TypeScript 기능의 이점을 누릴 수 있습니다.

---

React 컴포넌트 Props의 유형

React에서 구성 요소를 정의할 때 해당 props의 유형을 지정하여 구성 요소를 보다 명확하고 안전하게 사용할 수 있습니다. 기본적인 예는 다음과 같습니다.

type UserProps = {
  name: string;
  age: number;
};

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

이 예에서 UserCard는 이름(문자열)과 나이(숫자)라는 두 가지 속성을 기대합니다. 잘못된 유형을 전달하려고 하면 TypeScript에서 오류를 표시합니다.

---

ReactNode 대 ReactElement

React 구성 요소를 입력하기 위해 언제 ReactNode나 ReactElement를 사용해야 하는지 궁금할 것입니다.

• ReactNode: React에서 렌더링할 수 있는 모든 것을 나타냅니다. 여기에는 문자열, 숫자, JSX, 배열 및 null이 포함됩니다.

• ReactElement: 보다 구체적이고 문자열이나 null을 포함하지 않는 실제 React 요소를 나타냅니다.

예:

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

여기서 ReactNode를 사용하는 이유는 자식 요소가 React 요소뿐만 아니라 렌더링 가능한 모든 요소일 수 있기 때문입니다.

---

유형 대 인터페이스

소품이나 기타 객체의 모양을 정의할 때 유형과 인터페이스를 모두 사용할 수 있습니다. 그렇다면 차이점은 무엇인가요?

• 유형: 통합 유형이나 더 복잡한 조합을 만드는 데 가장 적합합니다.
• 인터페이스: 추가 유형을 확장하거나 구현할 때 더 나은 경우가 많습니다.

비교는 다음과 같습니다.

// Using type
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

둘 다 비슷하지만 인터페이스를 더 자연스럽게 확장할 수 있습니다.

interface IconButtonProps extends ButtonProps {
  icon: string;
}

---

TypeScript로 소품을 입력하는 방법은 무엇입니까?

구성 요소에 대한 props를 입력하려면 유형이나 인터페이스를 선언하고 이를 구성 요소 props에 대한 유형 주석으로 전달합니다.

예:

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

---

기능적 구성 요소 소품을 입력하는 방법은 무엇입니까?

기능적 구성요소의 props를 입력하려면 React.FC 또는 props를 명시적으로 선언하세요. React.FC가 일반적으로 사용되었지만 이제는 많은 사람들이 명시적 유형을 선호합니다.

다음은 명시적 유형을 사용하는 예입니다.

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

이 예에서 Badge에는 문자열로 입력된 텍스트와 색상이라는 두 가지 소품이 있습니다.

---

⛓ TypeScript를 사용한 React Hooks

React 후크는 TypeScript에 입력하여 구성 요소의 상태 및 효과 논리에 대한 유형 안전성을 보장할 수도 있습니다.

TypeScript에서 useState 및 useEffect를 사용하는 방법은 다음과 같습니다.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

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

이 예에서는 count가 항상 숫자인지 확인하기 위해 useState 후크가 입력되었으며, useEffect는 숫자가 변경될 때마다 현재 개수를 기록합니다.

---

이러한 모범 사례를 따르면 React 애플리케이션에서 TypeScript의 잠재력을 최대한 활용하여 더욱 강력하고 유지 관리가 가능한 코드를 만들 수 있습니다.

그리고 가기 전에 SQL 작업을 하고 있다면 Ultimate SQL 치트시트를 확인하여 기본 쿼리와 고급 쿼리를 모두 사용하여 SQL 기술을 향상하세요!

---

위 내용은 React로 TypeScript 익히기: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!