리액트 네이티브 기초지식 - 2) 속성(Props)

속성 --> 컴포넌트에 데이터를 전달하는 것을 의미한다.

예)

<Text style={styles.textStyle}>아아<Text>

--> Text태그는 하나의 컴포넌트임
--> 해당 컴포넌트에 style이라는 속성을 이용하여 Json형태로 이루어진 styles리스트에서 textStyle라는 딕셔너리 형태의 데이터를 전달한 것
--> 이렇게 전달된 데이터를 가지고 Text태그는 컴포넌트를 그림
//////////////////////////////////////////////////////////////////////////////////////
예2)

<Image style={styles.cardImage} source={aboutImage} resizeMode={"contain"}/>

--> Image태그는 하나의 컴포넌트임
--> style, source, resizeMode라는 속성을 이용하여 데이터를 전달

           --> 이 중 resizeMode와 같은 경우 전달할 수 있는 데이터의 형태가 정해진 형태("contain","cover" 등등) 
           	--> 이러한 전달할 데이터가 정해진 속성의 경우 공식문서에 기제되어 있으므로 참고
           
--> Image 컴포넌트는 전달받은 데이터를 그림

규칙

1) 속성으로 데이터를 전달할 떄는 키와 벨류 형태로 전달한다.
--> 아래의 ex)에서 content={content} 형태, key={i} 형태
--> 위 코드의 style={styles.cardImage} 형태, resizeMode={"contain"} 형태 등등

2) 태그를 반복문 돌릴 떄는 고유한 키값을 가져야 한다
--> 아래의 ex)에서 Card컴포넌트는 key라는 속성을 따로 명시하지 않았지만 Card 태그가 반복문에 의해 반복되기 때문에 key속성에 고유한 키값을 전달한 것

ex)

    <View style={styles.cardContainer}>
       {/* 하나의 카드 영역을 나타내는 View */}
       {
        tip.map((content,i)=>{
          return (<Card content={content} key={i}/>)
        })
      }

    </View>
    
    

결과적으로 Card 컴포넌트에 비구조 할당방식으로 저장됨
--> 비구조 할당방식 : 딕셔너리에서 키값을 바로 취해서 변수로써 함수 안에서 즉시 사용할 수 있게하는 방식

   prop:{
    content:{

    },
    key:{

    }
   }