React TypeScript - Props 사용법

TypeScript를 활용하여 React 개발을 할때의 좋은 점 중 한가지는 바로 Props를 받는 쪽에서 정할 수 있다는 점이다. Props로 지정할 수 있는 변수들의 이름과 형태까지 지정해 줄 수 있어서 자식 컴포넌트에 Props를 넘겨줄 때 일어나는 문제점을 미리 방지 할 수 있다.

그렇다면 간단하게 어떻게 Props를 정의해주고 활용하는지에 대해 알아보자.

일단 아래의 예제 코드를 한번 살펴보자!

import React from "react";
const RightArrow_IMG = require("app/img/right-arrow-idle.svg");
import RetailerInfoBoxSubCon from "./RetailerInfoBoxSubCon";
import RetailerInfoBoxTitleConLayout from "./RetailerInfoBoxTitleConLayout";

interface RetailerInfoRTNameTabProps {
  currentRTName: string;
}

const RetailerInfoRTNameTab: React.FunctionComponent<RetailerInfoRTNameTabProps> = props => {
  return (
    <RetailerInfoBoxTitleConLayout>
      <div className="title-box">
        <div className="title-content">업체명</div>
      </div>
      <div className="content-box">
        <RetailerInfoBoxSubCon content={props.currentRTName} />
      </div>
      <img src={RightArrow_IMG} />
    </RetailerInfoBoxTitleConLayout>
  );
};
export default RetailerInfoRTNameTab;

위 코드에서 가장 주목해서 보아야할 코드는 바로 interface 부분이다.

interface RetailerInfoRTNameTabProps {
  currentRTName: string;
}

interface 뒤에 props의 이름을 따로 선언해주고 보통 끝에 Props를 붙여준다. 그리고 Props로 받고자하는 속성값들을 정의하고, 형태까지 정해주면된다!

위의 코드에서는 currentRTName의 이름의 Props로 넘겨줄수 있고, 반드시 string 형태여야 한다는 뜻이다. 따라서 부모 컴포넌트에서 해당 Props가 활용되는 컴포넌트에는 currentRTName의 속성값을 반드시 string형태로 넘겨주어야 한다는 말이다. 그렇지 않으면 에러표시가 날 것이다!

해당 Props의 interface를 정의해주었다면 해당 Props를 받는다는 것을 아래 코드 형태로 반영해주어야한다.

const RetailerInfoRTNameTab: React.FunctionComponent<RetailerInfoRTNameTabProps> = props => {}

Props의 이름을 <RetailerInfoRTNameTabProps> 꺽쇠형태로 Props를 활용할 함수옆에 추가해주면된다. 인자로 props를 써주는 것도 잊지말자!

만약 currentRTName을 받을 수도 있고 받지 않아도될 상황이 있다면 아래와 같이 ? 를 붙여주면 된다.

interface RetailerInfoRTNameTabProps {
  currentRTName?: string;
}