{}표현식, 조건문
JSX 문법 사이에 자바스크립트 문법을 사용하기 위해 {}(중괄호)를 사용
예시 ) 코드의 일부분
let todayWeather = 10 + 17;
let todayCondition = "흐림"
return (
/
return 구문 안에서는 {슬래시 + 방식으로 주석
*/
<ScrollView style={styles.container}>
<Text style={styles.title}>나만의 꿀팁</Text>
<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
<Text>오늘의 날씨: {자바스크립트처럼 + 연산}</Text>
사용
<Text>나 <ScrollView> 등의 태그에 style을 입히기 위해서도 {}
사용
--> styles.container등 style을 불러오는 방식이 자바스크립트 방식
예시2) 코드의 일부분
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{ tip.map((content,i)=>{
return (<View style={styles.card} key={i}>
<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>)
})
}
</View>
<View> {자바스크립트 문법인 리스트.map()}</View>
사용
이를 이용하여 조건문 사용 --> 삼항 연산자
[기본]
let result = 조건 ? "참" : "거짓"
-----> let result = 조건항 ? 참항 : 거짓항 --> 삼항 연산자
예) let result = 10>2 ? 20:30
--> 10>2가 참이므로 참의 위치에 해당하는 20이 result에 할당된다.
예2) let result = 10==9 ? true:false
--> 10==9가 거짓이므로 거짓위치에 해당하는 false가 result에 할당된다.
예) 코드의 일부분
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{
tip.map((content,i)=>{
return i % 2 == 0 ? (<View style={styles.cardEven} key={i}>
<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>) : (<View style={styles.cardOdd} key={i}>
<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>)
})
}
</View>
--> i%2가 짝수일 경우 참항에 있는 JSX코드가 리턴(랜더링), i%2가 홀수일 경우 거짓항에 있는 JSX코드가 리턴(랜더링)
Author And Source
이 문제에 관하여({}표현식, 조건문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@odesay97/JSX-표현식-조건문저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)