속성(props)

속성은 간단히 말하면 컴포넌트에 데이터를 전달하는 것이다.

(전달 형태는 키와 벨류)

 

<Text> 말줄임표 효과를 줄때 numberOfLines  

<Image> 이미지영역을 차지하는 방식은 resizeMode 

 

위 친구들은 엘리먼트 요소들이 원래 가지고 있는 속성이라고 보면되고 이런것들은 공식문서에 다 나와있다!

 

예를들어,

 

<Card/> 컴포넌트에 속성이 존재하며, 내가 부여하는대로 속성이 만들어진다.

<Card image={'이미지 주소'}/> 라고 속성을 써 넣으면, 

 

<Card/> 컴포넌트는 image라는 속성이름에 {'이미지 주소'} 라는 값을 가지게 된다. 

속성이름 : 키 

이미지 주소 : 벨류 

 

 

위와같이 MainPage.js 에서의 Card.js 컴포넌트 속성(데이터)를 부여해줄때

키와 벨류 형태(content={content}) 로 전달 해줘야한다!

 

또한, 컴포넌트를 반복문 돌릴때는 컴포넌트마다 고유하다는 것을 표현하기 위해 map에서 나오는 인덱스 (i)를 key = {i} 속성 전달형태로 넣어줘야한다.

 

마지막으로

Card.js 에서 속성 값 내려받을 때는 비구조 할당 방식으로 속성 값을 내려받을 수 있다.

(비구조 할당 방식은 딕셔너리에서 키 값을 바로 취해서 변수 로써 함수안에서 즉시 사용할 수 있는 방식)