FE

TS & RN - props 타입 선언법

<zinny/> 2022. 7. 6. 12:27
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