React Props Type정의 하기

react에서 TypeScript를 사용할 때 Type을 지정하는 방법에 대해 적어둔다.

부모 컴포넌트

export interface ResultInfo {
    _id : string
    title : string 
    category : number
    image? : string
    post_content : string
    post_location : string
    isvalid : boolean
}

function BoardPage() {
	const [cardInfo, setCardInfo] = useState<ResultInfo[] | undefined>([]);
  
  return (
  	<div>
      {
      	cardInfo.map((info, idx) => <Cards info ={info} key={idx} />)
      }
    </div>
  )
}

자식 컴포넌트

function Cards({info}) {
	const {_id, title, category, image, post_content, post_location, isvalid} = info
    
    return(
    	<div>
      		<p>아이디 {_id}</p>
        	<p>제목 {title}</p>
            <p>카테고리 {category}</p>
            <p>사진 {image}</p>
            <p>내용 {post_content}</p>
            <p>위치 {post_location}</p>
            <p>유효 {isvalid}</p>
      	</div>
    )
}

위와 같이 부모컴포넌트에는 타입이 정해져 있고, 자식 컴포넌트에게 info를 props로 내려주고있다.

부모 컴포넌트에는 타입을 선언해주었으니 이제 자식에게만 선언해주면 되겠다.
부모 컴포넌트에서 선언한 interface ResultInfo를 먼저 자식 컴포넌트에 선언해주어 재사용할 수 있도록한다.

이후 props를 받는 곳에 타입을 설정해주면 되겠다.

자식 컴포넌트

import {ResultInfo} from './BoardPage'

type InfoProps = {
    info : ResultInfo
}

function Cards({info} : InfoProps) {
	const {_id, title, category, image, post_content, post_location, isvalid} = info
    
    return(
    	<div>
      		<p>아이디 {_id}</p>
        	<p>제목 {title}</p>
            <p>카테고리 {category}</p>
            <p>사진 {image}</p>
            <p>내용 {post_content}</p>
            <p>위치 {post_location}</p>
            <p>유효 {isvalid}</p>
      	</div>
    )
}