- 리액트에서 타입스크립트를 사용하며 기존의 자바스크립트에서 사용했던 문법과 달랐던 점을 정리하기로 했다.
- 이 포스트에서는 interface, React.FC, declare와 같은 키워드에 대해서 정리한다.
🍄 CRA에서 타입스크립트 탬플릿으로 타입스크립트가 적용된 리액트 프로젝트를 시작할 수 있다.
🍄 npx create-react-app my-app --template typescript
interface
-
interface는 객체 내부의 어떤 이름의 프로퍼티가 있으며 이 프로퍼티의 타입이 무엇인지 나타내기 위해서 사용한다.
-
변수, 함수, 클래스에 사용되어 어떤 프로퍼티를 가지는 객체를 인자로 사용하는지 알려주는 역할을 한다.
interface dataProp {
name: string;
age: number;
family: Array<string>;
}
interface ComponentProps {
data: dataProp; // 위의 선언된 객체
onClick: () => void;
}
🧀 type은 interface와 유사하게 사용될 수 있다.
🧀 다만, 확장하는 방법이 다르고 interface는 객체에만 사용할 수 있지만 type은 객체와 더불어 변수, 함수를 선언하는 데 사용할 수도 있다.
🧀 interface는 extends나 새로 선언하는 것으로 확장할 수 있고, type은 확장하기 위해서 &를 사용한다.
🧀 그러나 interface를 사용하는 것이 더 성능이 좋다고 하여 interface를 주로 사용했다.
🥓 사실 타입스크립트를 사용하며 객체를 써야 했을 땐 편리한 {} as any 를 많이 사용하게 되었던 것 같다.
🥓 useState에 들어가는 값이 객체이고, 이를 초기화 할 땐 다음과 같이 사용할 수 있다.
const [person, setPerson] = useState<dataProp>({
name: "Lee",
age: 35,
family: ["Park", "Kim"],
});React.FC
-
리액트에서 상태를 하위 컴포넌트에 내려보내기 위해서 props를 사용한다.
-
당신이 만약 타입스크립트를 사용하면, 기존의 리액트에서 사용했던 방식으로 props를 사용했을 때 오류가 발생하는 것을 알 수 있다.
-
타입스크립트를 사용한 리액트에서 컴포넌트의 타입을 지정해주고 props의 정보도 전달해줄 필요가 있다.
-
함수형 컴포넌트를 사용한다면 컴포넌트의 타입은 React.FC이 된다.
interface dataProp {
name: string;
age: number;
family: Array<string>;
}
interface ComponentProps {
data: dataProp; // 위의 선언된 객체
onClick: () => void;
}
const Home: React.FC<ComponentProps> = ({data, onClick}) => {
return (
<div onClick={onClick}>
<h1>이름: {data.name}</h1>
<h2>나이: {data.age}</h2>
{data.family.map(el => {
return <p>가족: {el}</p>
})}
</div>
);
}
export default Home;🥩 React.FC는 암묵적으로 children props를 항상 포함하고 제네릭 문법이 지원이 안되는 등의 문제가 있기에, props에 타입을 지정해주는 방법을 사용할 수도 있다.
🥩 다음과 같이 props의 타입을 직접 지정해줄 수 있다.
interface HomeProps {
name: string;
}
const Home = (props: HomeProps) => {
return <p>{props.name}</p>;
};
export default Home;declare
-
declare를 통해서 타입이 정해져있지 않으며 이미 존재하는 함수나 변수를 컴퍼일러에게 알려줄 수 있다. (이 코드는 자바스크립트로 컴파일되지 않는다)
-
이 변수나 함수의 타입역시 컴파일러에게 알려줄 수 있다. 타입을 설정해두어 타입스크립트 컴파일러가 컴파일할 수 있도록 한다.
-
카카오 API SDK를 사용하면서 window 객체에 접근할 필요가 있었는데 이 부분에서 오류가 있었고(존재하지만, 타입이 지정되어 있지 않음), 이를 해결하기 위해서 declare를 사용하였다.
declare global { // 현재 파일에서 글로벌 변수로 선언
interface Window { // Window 객체 재선언으로 확장
kakao: any;
}
}🥝 tsconfig.json 파일에서 타입스크립트와 관련된 설정을 변경할 수 있다.
