타입스크립트를 이용하여 리액트 프로젝트를 처음 시작할 때, 알아야하는 최소한의 내용을 다룹니다.
순서
1.Setup
2.Components
3.Hooks
4.Event
1. Setup
CRA로 프로젝트를 시작한다면 손쉽게 타입스크립트를 추가하여 개발환경을 구현할 수 있습니다. npx
create-react-app my-app --template typescript
Next.js 프로젝트에서 Typescript를 설정하는 방법은 여기서 확인할 수 있습니다. 이제 타입스크립트를 이용하여 프로젝트를 작성할 수 있습니다.
최종적으로 .ts .tsx 파일은 트랜스파일되어 Javscript 파일로 만들어집니다.
2. Components
함수형 컴포넌트를 이용하여 다음과 같이 작성할 수 있습니다.
import React from "react";
type Image = {
src: string;
alt: string;
};
interface CardProps {
image?: Image;
title: string;
content: string;
}
const Card = ({ image, title, content }: CardProps) => {
return (
<div>
{image && <img src={image.src} alt={image.alt} />}
<h3>{title}</h3>
<p>{content}</p>
</div>
);
};
export default Card;
컴포넌트의 props 타입을 명시하여 작성했습니다. 만약 prop에 유효하지 않은 값이 전달된다면 에디터 상에서 오류를 바로 확인할 수 있습니다.
🤔 React.FC를 사용하는 것은 지양합니다. 다음과 같은 이유가 있습니다.
- 사용하지 않는 편이 더 간단하고 익숙합니다.
- children prop이 옵셔널로 포함되어 props 타입이 명확하지 못합니다.
- defaultProps가 정상적으로 동작하지 않습니다. defaultProps 사용하여 props의 초기 을 정의하여도 값을 인식하지 못합니다.
개인, 팀의 의견에 따라 다를 수 있습니다.
이외에도 React.FC를 사용하는 것을 권장하지 않는 이유들이 더 있습니다. 해당 내용은 여기서 확인할 수 있습니다.
3. Hooks
1)useState
초기 값을 설정하는 경우라면 자동으로 타입이 추론됩니다. 이 경우 별도로 타입을 지정할 필요가 없습니다.
만약 초기 값을 설할 수 없는 경우라면 다음과 같이 작성할 수 있습니다.
type User = {
uid: string;
name: string;
email: string | null;
photoURL: string | null;
};
const [user, setUser] = useState<User | null>(null);
2)useEffect
별도의 타입 지정이 필요 없습니다.
3)useRef
특정 DOM을 선택하는 경우에는 다음과 같이 작성합니다.
const TextInputWithFocusButton = () => {
const inputEl = useRef<HTMLInputElement>(null);
const onButtonClick = () => {
// inputEl.current 값이 있는 경우만 다음의 동작을 수행합니다
if (inputEl.current) {
inputEl.current.focus();
}
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
};
타입스크립트는 어떤 요소가 선택될지 모르기 때문에, 우선 초기 값으로 null을 설정합니다. 이후 JSX 코드가 실행되면서 선택한 DOM을 가르키게 되는데, 이때 선택될 요소의 타입을 지정합니다.
4. Event
React 버전의 이벤트를 구체적으로 지정해야합니다. 예를들어 onClick의 처리는 다음과 같습니다.
import React, { useState } from "react";
const Toggle = () => {
const [isToggleOn, setIsToggleOn] = useState(false);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
setIsToggleOn((prev) => !prev);
};
return <button onClick={handleClick}>{isToggleOn ? "ON" : "OFF"}</button>;
};
이외에도 ChangeEvent, FormEvent 등 다양한 이벤트가 존재합니다.
여기까지 리액트 프로젝트에 타입스크립트를 처음 사용할때 알아두면 좋은 최소한의 핵심 내용을 다루었습니다.
개인적으로 타입스크립트를 사용하면서 어플리케이션의 에러도 방지하고 생산성도 향상시킬 수 있었습니다. 아직 사용해보지 않으셨다면 추천드립니다.