앱 화면 JSX 문법

App.js

리액트 네이티브와 Expo에서 제공해주는 기능들을 사용하여 화면을 그려주는 커다란 함수

App 함수를 내보내기 하고 있는 자바스크립트 파일

// 라이브러리에서 꺼내 사용할 기능들 선언
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


//화면을 반환
export default function App() {
	//HTML 태그 같이 생긴 JSX이며 실제 화면을 그리는 문법
	console.disableYellowBox = true;
  // return은 JSX로 된 화면을 앱상에 보여줌 == rendering
  // <View></View> 태크로 온전히 화면의 한 영역을 구성할 때 JSX에선 엘리먼트라 함
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

// styles은 StyleSheet를 통해 JSX를 그려줌  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

---

JSX 기본 문법

1. 모든 태크는 가져와서 사용함

   View나 Text 같은 문법들은 리액트 네이티브에서 제공해주는 태크 문법이다.

2. 태크는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용해야 함

3. 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야한다.

   XX 상황과 같이 디자인을 위해 감싸는 엘리먼트가 없다면 의미 없는 <>로 렌더링이 가능하지만 지양해야한다.

// OK
<View>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>

// XX
<>
<View>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
		<StatusBar style="auto" />
</>

4. return에 의해 렌더링 될 땐 항상 소괄호로 감싸져야 한다.

return(
<View>
  <>~~~</>
  </View>
)

5. JSX 문법 안에서와 밖의 주석은 다르다.

 return (
		//JSX 밖에서의 주석
    <View style={styles.container}>
			{/*
				JSX 문법 안에서의 주석
			*/}
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

---

JSX 기본 문법

{}은 JSX에서 JS 문법을 사용하기 위한 방식

<View style={styles.cardContainer}>
         {/* 하나의 카드 영역을 나타내는 View */}
{/*반복문을 돌릴때는 unique한 key를 가지고 있어야한다.*/}
         {
          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>

리액트 네이티브 공식 문서

https://reactnative.dev/docs/view