[React] 컴포넌트 Property type 가져오기 | Get component props type

 

상황

블로그 글 내용을 표시하는 React 어플리케이션을 개발 중입니다. 각 글은 제목, 내용, 고유 ID 등의 다양한 정보를 가지고 있습니다. PostDetail 컴포넌트는 props로 전달받은 글의 제목과 내용을 표시합니다.

 

interface PostDetailProps {
  post: PostType
}

function PostDetail({ post }: PostDetailProps) {
  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}

 

 

MyParent 컴포넌트에서 PostDetail 컴포넌트를 사용하고자 합니다. PostDetail의 post 타입은 어떻게 추론할 수 있을까요?

 

// MyParent.tsx
function MyParent() {
  function getPost(): PostProps {
    // how to get MyChild's "status" property type?!
  }

  const post = getPost();
  
  return <PostDetail post={post} />;
}

 

 

해결 방법

React.ComponentProps를 사용하여 컴포넌트의 property type을 알 수 있습니다.

 

// MyParent.tsx

type PostProps = React.ComponentProps<typeof PostDetail>['post']

function MyParent() {
  function getPost(): PostProps {
    return { ... }
  }

  const post = getPost()
  
  return<PostDetail post={post} />
}

이 예제에서, React.ComponentProps를 사용하면 PostDetail 컴포넌트의 모든 property 타입을 가져옵니다. 그리고 ['post']를 추가하여 PostDetail 컴포넌트의 post property 타입을 선택합니다. 이렇게 하면 PostDetail의 post property 타입을 추론할 수 있게 됩니다.

 

이 방식을 사용하면 PostDetail컴포넌트의 post property 타입을 명확하게 추론할 수 있으며, 타입 안정성을 확보할 수 있습니다.

 

검색 키워드 - typescript get component's property type

참고 글 https://stackoverflow.com/questions/43230765/typescript-react-access-component-property-types