FE

TS & RN - props 타입 선언법

<ziny/> 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

'FE' 카테고리의 다른 글

[RN] - ios font 적용  (0) 2022.07.28
[RN] - 더보기 누르면 글 보이게 하는 기능  (0) 2022.07.08
[RN] - Image태그 사용 방법  (0) 2022.07.04
[RN] - svg 사용법 with yarn  (0) 2022.07.04
[RN] - 첫 세팅 이후 ~ 앱 실행  (0) 2022.06.22