개발
[타입스크립트] 리액트에서 타입스크립트를 어떻게 사용하는가?
라샐리
2023. 3. 23. 10:59
반응형
타입스크립트 쌩초보이다
회사 동료 프론트엔드 개발자가 타입스크립트 어렵게 생각하는 나에게
진짜 별거 아니라고 하면서 설명해준 것을 정리해본다
정말 듣고 나니까 식은죽 먹기네?
근데 타입스크립트 사용할 때 왜 이중으로 두번씩 쓰는건지 궁금했는데
구조분해할당해주기 때문이었다
이것을 Type과 Interface로 빼낼 수 있는데
일단 나는 초보이기 때문에 Type으로 Props를 빼내는 것을 이용하기로 했다
App.tsx
import React from "react";
import tw from "tailwind-styled-components";
import "./App.css";
import Tab from "./components/Tab";
일단 간략하게 이런 구조의 코드다
Tab 이라는 컴포넌트를 넣어주면서 Tab에서 타입을 지정하려고 한다
./components/ Tab.tsx
import React, { useState } from "react";
const Tab = ({ menuName, menuNumber }: {menuName: String, menuNumber: Number}) => {
const { menuName, menuNumber } = props;
console.log(menuNumber);
return <div>Tab</div>;
};
export default Tab;
기초 수준에 타입스크립트 설정
menuName, menuNumber를 두개씩 써주는건지 이해가 가지 않았다.
앞에 있는 {menuName, menuNumber} 가 구조분해한 Props를 나타내는 것이다
import React, { useState } from "react";
const Tab = ({
menuName,
menuNumber,
}: {
menuName: String;
menuNumber: Number;
}) => {
const { menuName, menuNumber } = props;
console.log(menuNumber);
return <div>Tab</div>;
};
export default Tab;
이 코드를 보면 아! 하고 이해가 갈 것이다
props를 구조분해할당해준 것이 Tab 변수에 타입지정할 때 사용되었다
import React, { useState } from "react";
type TabProps = {
menuName: String;
menuNumber: Number;
};
const Tab = ({
menuName,
menuNumber,
}: {
menuName: String;
menuNumber: Number;
}) => {
console.log(menuNumber);
return <div>Tab</div>;
};
export default Tab;
props가 많아지면 복잡해지니까
Type으로 빼낼 수 있다
이름은 헷갈릴 수 있으니 똑같이 하지 않고 TabProps라고 해준다.
import React, { useState } from "react";
type TabProps = {
menuName: String;
menuNumber: Number;
};
const Tab = ({ menuName, menuNumber }: TabProps) => {
return <div>Tab</div>;
};
export default Tab;
Tab 변수 안에도 type을 넣어주면 코드가 훨씬 짧아진것을 볼 수 있다.
반응형