CRA

CRA 공식 홈페이지

create-react-app.dev

참조용 스타터 킷

React TypeScript Cheatsheet

TypeScript 버전 CRA

명령어

npx create-react-app 새폴더이름 --template typescript

--template typescript은 옵션 또는 플래그가 Create React 앱에게 TypeScript 앱을 만든다고 알려주고 자동으로 tsconfig 파일을 생성합니다.

return jsx

<h1>Hello</h1>는 JSX.Element 타입으로 정의 되어 있기 때문에 반환 타입을 JSX.Element로 바꿔줍니다.

import React from "react";

function Greeter(): JSX.Element {
  return <h1>Hello</h1>;
}

export default Greeter;

props

props는 매개변수 Type Annotation과 같습니다.

props 전달

// App.tsx

import React from "react";
import Greeter from "./components/Greeter";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Greeter person="Zima" />
      <Greeter person="Blue" />
      <Greeter person="Korean" />
    </div>
  );
}

export default App;

Basic 버전

// Greeter.tsx

import React from "react";

function Greeter(props: { person: string }): JSX.Element {
  return <h1>Hello, {props.person}</h1>;
}

export default Greeter;

Interface 버전

// Greeter.tsx

import React from "react";

interface GreeterProps {
  person: string;
}

function Greeter(props: GreeterProps): JSX.Element {
  return <h1>Hello, {props.person}</h1>;
}

export default Greeter;

Destructure 버전

// Greeter.tsx

import React from "react";

interface GreeterProps {
  person: string;
}

function Greeter({ person }: GreeterProps): JSX.Element {
  return <h1>Hello, {person}</h1>;
}

export default Greeter;

useState

type

// (alias) function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
useState

useState의 매개변수는 S타입을 가지고 return 값은 S타입과 상태를 변경할 수 있는 함수입니다.

문제점

위의 설명대로라면 useState의 초기값 타입과 Destructure하여 얻은 첫 번째 값의 타입이 같습니다.
따라서 초기 값을 빈 배열로하면 첫 번째 값도 빈 배열 리터럴 타입이 됩니다.
하지만 일반적으로 이는 사용자가 원하는 쓰임이 아닙니다.

// const items: never[]
const [items, setItem] = useState([])

해결

제네릭 타입을 제공하고 시작 값을 넣어주면 항상 상태를 지니는 동일한 배열을 반환합니다.
빈배열 이거나 Item 타입을 값으로 갖는 배열이 첫 번째 값으로 올수 있습니다.

interface Item {
  id: number;
  product: string;
  quantity: number;
}

function App() {
  // const items: Item[]
  const [items, setItem] = useState<Item[]>([]);
  return ();
}

Form Event

Form에서 submit 함수의 매개변수 이벤트 타입은 React.FormEvent입니다.

import React from "react";

function ShoppingListForm(): JSX.Element {
  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
  }
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Product Name" />
      <button type="submit">Add Item</button>
    </form>
  );
}

export default ShoppingListForm;

useRef

DOM을 연결하는 useRef는 Element타입만 인수로 사용하며, 초기값은 null을 사용합니다.
초기값이 null인 이유는 useRef가 최초 실행될 때 연결된 DOM은 없기 때문입니다.

import React, { useRef } from "react";

interface ShoppingListForm {
  onAddItem: (item: string, quantity: number) => void;
}

function ShoppingListForm({ onAddItem }: ShoppingListForm): JSX.Element {
  const productInputRef = useRef<HTMLInputElement>(null);
  const quantityInputRef = useRef<HTMLInputElement>(null);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const newProduct = productInputRef.current!.value;
    const quantity = parseInt(quantityInputRef.current!.value);
    onAddItem(newProduct, quantity);
    productInputRef.current!.value = "";
    quantityInputRef.current!.value = "1";
  }
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Product Name" ref={productInputRef} />
      <input type="number" min={0} ref={quantityInputRef} />
      <button type="submit">Add Item</button>
    </form>
  );
}

export default ShoppingListForm;