스파르타코딩클럽 3주차_[비구조 할당]

JS 문법_ 비구조 할당

MainPage.js

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

MainPage에서 Card.js에 넘겨 준 값들은,
props라는 딕셔너리 이름에 들어있게 된다.

즉, Card.js에 이런 형태의 props가 전달되는 것!

{
  props: {
    content: {
    },
    key : {
    }
  }
}

따라서, 이 props를 그대로 사용하면 다음과 같은 코드를 추가하여
사용할 content를 꺼내어 주어야 한다.

export default function Card(props) {
  let content = props.content; //content를 꺼내기

그런데, 굳이 이렇게 한 줄을 추가할 필요 없이, 딕셔너리에서
비구조 할당 방식으로 필요한 key값만 꺼낼 수 있다는 것!

Card.js

//비구조 할당 방식으로 넘긴 속성 데이터를 꺼내 사용함
export default function Card({content}) {
  return (<View style={styles.card}>
        <Image style={styles.cardImage} source={{ uri: content.image }} />
        <View style={styles.cardText}>
            <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
            <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
            <Text style={styles.cardDate}>{content.date}</Text>
        </View>
    </View>)
};