8월 24일 리액트를 위한 타입스크립트 정리 글입니다.

리액트를 위한 타입스크립트

리액트를 사용하면서 알아야 할 타입, 주의할 점을 정리했습니다.

객체 타입 정의 방법

객체 타입을 정의하는 방법은 3가지가 있습니다.

Object

객체로 바로 정의하는 경우입니다. 재사용이 불가능하고 가독성이 좋지 않아 웬만하면 type이나 interface를 사용하는 것이 좋습니다.

const TestComponent = (pram: { id: string; age: number }) => {};

type 별칭, interface

두 방법 모두 형태와 사용법은 비슷해 상황에 따라 맞춰 사용하면 됩니다.
차이라고 하면 type 별칭 같은 경우 type 마우스 hover 시 타입들이 모두 보여줘 디버깅하기엔 편하지만 지저분할 수 있습니다.
interface 같은 경우는 type 마우스 hover 시 타입들이 안 보여 깔끔한 느낌을 받을 수 있습니다.

타입스크립트 공식 문서에는 interface를 권장합니다.

// type 별칭
type ParamProsp = {
  id: string;
  age: number;
};

// interface
interface ParamProps {
  id: stirng;
  age: number;
}

const TestComponent = (pram: ParamProps) => {};

함수형 컴포넌트

함수형 컴포넌트를 선언하는 방법은 2가지가 있습니다.

1. 리액트의 FC 타입 사용

리액트에서 제공하는 FC( Funciton Component ) 타입입니다. 제네릭으로 props 타입을 전달해야 합니다.

import { FC } from "react";

interface UserProps {
  id: string;
  age: number;
}

const UserInfo : FC<UserProps> = ({id, age}) => { ... }

리액트에서 제공하는 FC 타입에는 함수의 매개변수인 props와 반환값인 JSX가 이미 정의되어 있어 return 타입을 지정하지 않아도 됩니다.

2. 일반적인 함수 정의 방식

함수형 컴포넌트도 곧 함수이므로 일반 함수처럼 타입을 지정할 수 있습니다.

interface UserProps {
  id: string;
  age: number;
}

const UserInfo = ({id, age} : UserProps) :JSX.Element => { ... }

일반 함수처럼 props의 타입을 지정하고, return 타입을 명시했습니다.

Hooks

자주 사용하는 Hooks의 타입입니다.

useState

const [isToggle, setIsToggle] = useState(false);
const [isToggle, setIsToggle] = useState<boolean>(false);

위의 코드처럼 타입을 지정하지 않아도 타입 추론으로 타입이 지정되고, 아래의 코드처럼 직접 타입을 작성해도 됩니다.

const [info, setInfo] = useState<string | null>(null);

만약 state의 타입이 string인데 초깃값으로 null을 넣을 상황에서는 타입 충돌이 일어나므로 Union 타입을 이용해 2개의 타입을 명시해 주면 됩니다.

interface Info {
  id: string;
  age: number;
}

const [info, setInfo] = useState<Info[]>([]);

만약 info가 객체라면, 미리 interface로 정의해둔 타입을 설정할 수 있습니다. 배열인 경우 [] 사용해 처리할 수 있습니다.

useRef

useRef 역시 타입추론을 통해 타입이 정의되지만, 확장성을 위해 직접 지정할 수 있습니다. Dom을 가리키는 Hooks 이므로 HTMLDivElement, HTMLButtonElement 처럼 태그의 Elment를 지정하면 됩니다.

const ContainerRef = useRef<HTMLDivElement>(null);

return (
  <div ref=ContainerRef>
        ...
  </div>;
)

Event Handler

이벤트 핸들러 함수의 매개변수에도 특별한 타입이 필요합니다. 여러 이벤트가 있듯, 이벤트 맞는 다양한 타입이 있습니다.

// onChange 이벤트의 타입
const updateValue = (e: React.ChangeEvent<HTMLInputElement>) => {
  setEmail(e.target.value);
};

...

<input onChange={updateValue} />;

전역 변수

window에 외부 라이브러리 변수를 추가하기 위해선 해당 라이브러리에서 사용하는 전역 변수명을 추가하면 됩니다. 보통 프로젝트를 시작할 때 동작하는 index.tsx에 선언하면 됩니다.

declare global {
  interface Window {
    kakao: any;
  }
}