[React + TS] React에서 Typescript 사용하는 방법 알아보기 (1)

React + TS

1. 함수에서 TS 사용하기

방법 1)

function sum(a: number, b: number): number {
  return a + b;
}

▶️ 매개변수 각각의 type을 지정해주고, return문의 type을 지정

방법 2)

function objSum({ a, b }: { a: number; b: number }): string {
  return `${a + b}`;
}

▶️ object를 인자로 받을 경우, { a, b }: { a: number; b: number } 각각의 type을 지정.

2. 비동기 함수에서 TS 사용하기

1️⃣ Person의 타입을 지정해준다.

type Person = { id: number; age: number; height: number };

2️⃣ 반환해주는 getPerson()의 type은 Person[] array를 반환한다.

async function getPerson(): Person[] { // error 발생

▶️ error 뜨는 이유는 ? return type은 async 함수인데 Promise 어디감?

3️⃣ 비동기함수는 Promise로 반환하므로, Generic으로 감싸준다.

async function getPerson(): Promise<Person[]> {

type Person = { id: number; age: number; height: number };

async function getPerson(): Promise<Person[]> {
  const res = await fetch(`http://localhost:5008/people`);
  if (!res.ok) {
    throw new Error();
  }
  return res.json();
}

getPerson().then((res) => console.log(res[0]));

3. Generic<T> 에 대하여

: 어떤 데이터의 타입(data type)을 일반화한다(generalize)는 것을 의미 = type을 변수화한다.

type Generic<T> = {
  someValue: T;
};

type Test = Generic<string>;

function someFunc<T>(value: T) {}

someFunc<string>("hello");
someFunc<string>(1); // error : string이 들어가야 할 자리에 number가 들어갔다. 

▶️ 꺾쇠 안에 들어 있는 type을 T에서 그대로 사용한다.

4. useState에서 사용하기

import { useState } from "react";

function App() {
  const [counter, setCounter] = useState<number>(1);
  const increment = () => {
    setCounter((prev) => prev++);
  };
  return <div onClick={increment}>{counter}</div>;
}

export default App;

▶️ useState의 기본 type을 지정해주기 위해서 generic을 통해 <number>, <string> 등 type을 지정해준다.