8월 24일 리액트를 위한 타입스크립트 정리 글입니다.
리액트를 사용하면서 알아야 할 타입, 주의할 점을 정리했습니다.
객체 타입을 정의하는 방법은 3가지가 있습니다.
객체로 바로 정의하는 경우입니다. 재사용이 불가능하고 가독성이 좋지 않아 웬만하면 type이나 interface를 사용하는 것이 좋습니다.
const TestComponent = (pram: { id: string; age: number }) => {};
두 방법 모두 형태와 사용법은 비슷해 상황에 따라 맞춰 사용하면 됩니다.
차이라고 하면 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가지가 있습니다.
리액트에서 제공하는 FC( Funciton Component ) 타입입니다. 제네릭으로 props 타입을 전달해야 합니다.
import { FC } from "react";
interface UserProps {
id: string;
age: number;
}
const UserInfo : FC<UserProps> = ({id, age}) => { ... }
리액트에서 제공하는 FC 타입에는 함수의 매개변수인 props와 반환값인 JSX가 이미 정의되어 있어 return 타입을 지정하지 않아도 됩니다.
함수형 컴포넌트도 곧 함수이므로 일반 함수처럼 타입을 지정할 수 있습니다.
interface UserProps {
id: string;
age: number;
}
const UserInfo = ({id, age} : UserProps) :JSX.Element => { ... }
일반 함수처럼 props의 타입을 지정하고, return 타입을 명시했습니다.
자주 사용하는 Hooks의 타입입니다.
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
역시 타입추론을 통해 타입이 정의되지만, 확장성을 위해 직접 지정할 수 있습니다. Dom을 가리키는 Hooks 이므로 HTMLDivElement
, HTMLButtonElement
처럼 태그의 Elment를 지정하면 됩니다.
const ContainerRef = useRef<HTMLDivElement>(null);
return (
<div ref=ContainerRef>
...
</div>;
)
이벤트 핸들러 함수의 매개변수에도 특별한 타입이 필요합니다. 여러 이벤트가 있듯, 이벤트 맞는 다양한 타입이 있습니다.
// onChange 이벤트의 타입
const updateValue = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
};
...
<input onChange={updateValue} />;
window
에 외부 라이브러리 변수를 추가하기 위해선 해당 라이브러리에서 사용하는 전역 변수명을 추가하면 됩니다. 보통 프로젝트를 시작할 때 동작하는 index.tsx
에 선언하면 됩니다.
declare global {
interface Window {
kakao: any;
}
}