React | Component를 만드는 법

※주의: 쌩초보의 관점으로 쓰여진 글입니다 ※

 

컴포넌트를 만드는 법

(결론: 임포트를 하고 태그를 넣는다.)

 

자, 우리 메인페이지에 카드 컴포넌트를 넣어보자!!!!!!

 

메인페이지 코드

<View style={styles.cardContainer}> 

{ 
cateState.map((content,i)=>{ 
	return (<Card content={content} key={i} navigation={navigation}/>)
    })
    }
    
   </View>

• <Card> 라는 태그를 만든다. (이게 하나의 컴포넌트가 된다.)

그럼 태그는 어떻게 만드냐?

위에서 메인페이지 안에서 임포트를 해줘야 함.

그럼 <Card>를 컴포넌트로 인식함.

import Card from '../pages/components/Card';

 

카드.js 코드

export default function Card({content,navigation}){
    return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>
            <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>
        </TouchableOpacity>
    )
}

• 여기서 함수값인 content는 뭘까? 바로 State 함수값이 된다.
• 왜 쓸까? content이름으로 json에서 내용을 찾기 위해 존재한다. 여기서 content는 date.json의 내용값 하나하나를 가리킨다.

비구조 할당 방식 - 필요한 키값과 내용을 그대로 갖다 꺼내서 쓴다.

content = {content}

콘텐츠로 뭘 꺼낼까요? 콘텐츠요~

 

content로 꺼내서 쓰는게 바로 이것!

키값(i) : 내용값(content)

 

• 안의 태그는 반복문 돌릴때 고유한 키값을 가져야 한다?? 여긴 잘 모르겠다.
• (앗 근데 맵함수를 까먹었당..)
• i는 순서를 위해 가지고 있는다. (반복문에서)