[React]리액트 타입 연결

리액트에서의 타입 연결

컴포넌트가 어떤 props(프롭스)를 받을지 타입스크립트로 명확하게 정의하면 컴포넌트를 사용할 때 타입 오류를 미리 잡을 수 있고, 코드가 자동완성되어 일의 능률이 올라갑니다.

---

타입스크립트에서 props 타입을 지정하는 방법

1) 인터페이스(interface)로 props 타입 정의

interface RankingProps {
  movie: Movie;
}

• 이 예시에서 RankingProps는 Ranking 컴포넌트가 받을 props의 타입을 정의합니다.
• movie라는 이름의 prop이 반드시 들어와야 하고, 그 타입은 Movie여야 한다는 뜻입니다.

2) 컴포넌트에 타입 연결

const Ranking = (props: RankingProps) => {
  const { movie } = props;
  // ...
};

• 함수의 매개변수(props)에 RankingProps 타입을 지정합니다.
• 이렇게 하면 props.movie를 쓸 때 타입스크립트가 타입을 체크합니다.

3) 구조분해 할당과 타입 연결

const Ranking = ({ movie }: RankingProps) => {
  // movie는 Movie 타입으로 자동 인식됨
};

• 구조분해 할당을 이용하여 props를 꺼내 쓸 수 있습니다.
• 이와 같은 경우에도 movie의 타입이 자동으로 Movie로 지정됩니다.

 

2. 프로젝트 내의 Ranking 컴포넌트에 적용

import React from "react";
import { StyledRanking } from "./styles";
import { Movie } from "@models/Movie";
import { Link } from "react-router-dom";

interface RankingProps {
  movie: Movie;
}

const Ranking = ({ movie }: RankingProps) => {
  return (
    <StyledRanking>
      <Link to={`/detail/${movie.id}`}>
        <p>{movie.title}</p>
        <p>{movie.thumbnail}</p>
        <p>{movie.id}</p>
      </Link>
    </StyledRanking>
  );
};

export default Ranking;

• RankingProps라는 타입을 만들어서 props 타입을 명확히 했습니다
• 부모 컴포넌트가 <Ranking movie={movie} />로 movie 객체를 넘기면 Ranking 컴포넌트는 movie가 반드시 Movie 타입임을 보장받습니다.

---

타입 연결의 장점

• 오타나 잘못된 타입 사용을 미리 방지할 수 있습니다.
• 자동완성이 잘 동작해서 개발이 편리해집니다.
• 컴포넌트가 어떤 데이터를 기대하는지 명확하게 드러납니다.

children 타입 명시

만약 컴포넌트가 children(태그 사이의 내용)도 받는다면, 이렇게 타입을 추가할 수 있습니다.

interface MyComponentProps {
  color: string;
  children?: React.ReactNode;
}

• children?: React.ReactNode를 추가하면, <MyComponent color="red">내용</MyComponent>처럼 사용할 수 있습니다.

---

정리

• interface 또는 type으로 props의 타입을 정의합니다.
• 컴포넌트의 매개변수에 그 타입을 연결합니다.
• 부모 컴포넌트가 올바른 타입의 데이터를 넘기지 않으면 에러가 발생합니다.
• 타입스크립트와 함께 쓰면 리액트 컴포넌트의 안전성과 개발 효율이 크게 올라갑니다.

참고: 타입 연결 방식에는 interface, type, React.FC 등 여러 가지가 있지만, 요즘은 interface/type + 함수형 컴포넌트 방식이 가장 많이 쓰인다고 합니다.