[Typescript] 왜 React랑 같이 쓰는가?

Typescript

type 종류

기본타입

• String, number, boolean, Array, null, undefined, any 타입(any 사용지양)

함수타입

• 괄호 안에 인수타입, 괄호 밖에 반환값 타입 각각 지정

const funA = (num: number) : void => {
	console.log("funA");
}

복합타입

• intersection 교차타입 : &로 여러타입 지정해서 사용 가능

const TypeA = {
	str: String;
	num: number;
};
const TypeB = {
	bool: boolean;
};
type TypeC = TypeA & TypeB;

const TypeC = {
	str: "A",
	num: 10,
	bool: false,
};

Generic

• 타입정의 시 동적으로 변경할 수있는 기능 제공

type TypeD<T> = {
	val: T;
};

const strObj: TypeD<String> = { val: "10};

--useState 정의 시 타입 사용
const [str, setStr] = useState<String>("");

API로 얻은 데이터 타입 정의

왜 사용? 얻은 데이터 변수명 오타로 에러 발생 가능, 미리 타입 정의해둠으로써 발생 최소화

user.ts

export type User = {  
  id: number;  
  name: string;  
  age: number;  
  personalColor: string;  
  hobbies: string[];  
};

App.tsx

import { useEffect, useState } from "react";  
import { ListItem } from "./components/ListItem";  
import axios from "axios";  
import type { User } from "./types/user";  
  
export const App = () => {  
  // 얻은 사용자 정보  
  const [users, setUsers] = useState<User[]>([]);  
  
  // 화면 표시 시 사용자 정보를 얻는다  
  // ※ 실제로는 엔드포인트가 존재하지 않으므로 주의  
  useEffect(() => {  
    axios.get<User[]>("https://example.com/users").then((res) => {  
      setUsers(res.data);  
    });  
  }, []);  
  
  return (  
    <div>  
      {users.map((user) => (  
        <ListItem  
          id={user.id}  
          name={user.name}  
          age={user.age}  
          personalColor={user.personalColor}  
          hobbies={user.hobbies}  
        />  
      ))}  
    </div>  
  );  
};

Props 타입 정의 & 컴포넌트 타입 정의

• 정의해둔 user.ts 의 User 사용하여 prop도 아래처럼 제네릭으로 넣어서 정의하고 사용 가능
• FC, VFC 사용하여 컴포넌트명 뒤에 타입지정(FC vs VFC : children 포함 vs 미포함)

import type { FC } from "react";  
import type { User } from "../types/user";  
  
export const ListItem: FC<User> = (props) => {  
  const { id, name, age, personalColor = "grey", hobbies } = props;  
  return (  
    <p style={{ color: personalColor }}>  
      {id}:{name}({age}) {hobbies?.join(" / ")}  
    </p>  
  );  
};

생략가능 타입 정의

• ?를 붙임으로써 생략가능한 타입으로 정의 가능

user.ts

export type User = {  
  id: number;  
  name: string;  
  age: number;  
  personalColor?: string;  
  hobbies?: string[];  
};

React & Typescript를 같이 사용하면 좋은 효과성 있음
변수, 함수, 컴포넌트 등에 타입을 정의해둠으로써 쓸데없는 에러를 방지할 수 있게됨.