728x90
부모 컴포넌트에 타입 지정해주기
interface data {
id?: number;
Title: string;
Nickname: string;
Time: string;
}
interface dataProps {
dataList: data[];
}
부모 컴포넌트에서 선언한 타입을 쓸 수 있게 함수에 넣어주기
function Parents({dataList} : dataProps){
return (
{dataList.map((data, index)=>{
return <Children key={data.id} data={data}/>
}
}
)
}
자식 컴포넌트에도 타입 지정 해주기
interface dataProps {
data: {
id?: number;
Title: string;
Nickname: string;
};
key: Number;
}
자식 컴포넌트에서 넘어온 값 쓰는 법
function Children ({data, key} : dataProps){
return (
<Text> {data.Title} </Text>
)
}
728x90
'FE' 카테고리의 다른 글
JS - dangerouslySetInnerHTML 문자열로 출력된 html렌더링 (0) | 2023.04.20 |
---|---|
JS - 스크롤에 따른 DOM요소의 좌표 찾기 (0) | 2023.01.17 |
TS - defaultProps 사용법 (0) | 2022.05.12 |
REACT - 드롭다운 & Search 기능 (0) | 2022.04.25 |
REACT - 회원가입 유효성 검사 & 비밀번호 토글 기능 (0) | 2022.04.25 |