JSX - {}표현식, 조건문

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코드가 리턴(랜더링)