개발

[타입스크립트] 리액트에서 타입스크립트를 어떻게 사용하는가?

라샐리 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을 넣어주면 코드가 훨씬 짧아진것을 볼 수 있다.

 

 

 

반응형