JSX 기본 문법

리액트 네이티브라는 개발도구 위에 Expo를 올려서 손쉽게 코딩하는 형태
--> 기반은 리액트 네이티브이므로 모든 태그는 리액트 네이티브(도구상자)로 부터 불러옴

[아래의 이 부분] --> import { StyleSheet, Text, View } from 'react-native';
  --> 리액트 네이티브(도구상자)로부터 해당 태그를 불러옴

JSX 문법 --> <> 형태로 된 태그문법로 이루어짐

[Expo로 앱 생성시 초기 화면]

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default function App() {

  console.disableYellowBox = true;

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

--> App() 함수는 View태그를 반환(반환된 View로 화면을 그려주는 것)
-->화면에 반환된 View 태그의 내용이 나타남

--> 여러 태그들은 공식문서에 사용설명이 명시되어있음 --> 참고
[리액트 네이티브]
https://reactnative.dev/docs/components-and-apis

[엑스포]
https://docs.expo.dev/versions/latest/

JSX 규칙

1. 모든 태그는 리액트 네이티브(도구상자)에서 가져와서 사용한다.(import)
   --> 이후 사용시 export 명시(위의 코드 예시)
   
   
2. 태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용해야 한다.
   --> 예) 위의 코드에
   <Text>Open up App.js to start working on your app!</Text> 와
   <StatusBar style="auto" /> 의 차이
   --> 이 사용 방법은 위의 공식문서 참고
   
   
3. 모든 태크는 그 태그를 감싸는 최상위 태그가 있어야 한다.
   예) 위의 코드에서 View 태그가 Text와 StatusBar 태그를 감싸고 있음
   
   
4. return에 의해 반환될 때 항상 소괄호() 로 감싸져 있어야 함
   --> 위의 예시
   return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> );
   
   
5. JSX문법 안에서의 주석과 밖에서의 주석은 다르다.
   --> //일반적인 주석
   --> {/* JSX문법(태그)안에서의 주석 */}
   --> 그냥 주석하고 싶은 문장을 드래그한후, ctrl + /