react props 전달 받는방법

Question

function Card(title: string, content: string) { return ( <>

{title}

{content}

); } function Cards() { // data가져오는 코드 data.map(d => { return }) } 이렇게 했는데 Cards의 Card부분에서 오류가 나네요.. 어떻게 해야하나요?? 그리고 typescript도 any가 아니라 props에 type을 잘 사용하려면 어떻게 해야할까요?

엄홍재 · Answer

props로 전달받을때 따로따로 받지 않고 하나로 받아요. 그래서 Card에서 title, content가 각각 있는게 아니라 하나의 object로 받아야합니다. 제 스타일로 수정해봤습니다. interface PropsType { title: string, // 제 추측으로 string으로 넣었습니다. content: string } function Card(props: PropsType) { const { title, content } = props return ( <> <p>{title}</p> <p>{content}</p> </> ) } // 이하동일 function Cards() { // data가져오는 코드 data.map(d => { return <Card key={d.id} title={d.title} content={d.content} /> }) } 화이팅!!

{title}

{content}

) } // 이하동일 function Cards() { // data가져오는 코드 data.map(d => { return }) } 화이팅!!