JSX 기본문법

JSX문법을 공부하기에 앞서, App.js 에 대해 간단히 알아보면 "앱의 화면을 그려주는 커다한 함수" 이며, 자세히는 

리액트 네이티브 라이브러리 또는 expo에서 제공해주는 기능들을 사용하여 화면을 그려준다. 

 

* App.js 기본형태

//앞으로 사용할 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내서 사용할 기능들을 아래와같이 선언해준다.  import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; // App.js는 App함수를 내보내기 하고 있는 자바스크립트 파일이며, 앱 화면을 반환하고 있다.  export default function App() { // return에서는 화면을 반환하고 있으며, 아래 문법을 JSX문법이라고한다.  return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); } // JSX문법을 꾸며주는 내용을 담고 있다.  const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

간혹, 빨간색 경고창이 아니라 노란색 경고창이 뜨는경우가 있는데 이건 에러가 아니라 권고사항정도로 보면된다!

return 하기 전 아래코드를 작성해두면 노란색 경고창이 안뜨게 할수있다.

console.disableYellowBox = true;  

 

1. JSX기본 문법

 

- 모든 태그는 공식문서에 나와있는 그대로 사용한다.  

앞으로 사용하는 태그들은 공식문서에 나와있고 제공해주는 태그 문법을 사용한다.

https://docs.expo.dev/versions/v38.0.0/react-native/view/

View - Expo Documentation

https://reactnative.dev/docs/view

View · React Native

- 태그는 항상 닫는태그와 자체적으로 닫는태그를 구분해서 사용해야한다.

export default function App() { return ( // <View>는 결국  </View>로 닫는태그가 존재하므로 본인의 영역을 가지게된다.  <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> //<statusBar /> 같은경우 스스로 닫는태그 </View> ); }

- 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야한다. 엘리먼트는 곧 태그 ( <> )

방법1	방법2	방법3(오류 발생)
//App.js가 렌더링하고 엘리먼트는  //Text 와 StatusBar엘리먼트를 감싸고있는 View다. export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); }	export default function App() { return ( <> <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> </View> <StatusBar style="auto" /> </> ); } 추후 디자인적인 측면을 위해 프래그먼트라고 의미없는 빈 엘리먼트로 감싸는 경우도 있지만 이방법은 지양하는게 좋다.	//View 엘리먼트 밖에 StatusBar가 나와있으므로 엘리먼트 전체를 감싸는 엘리먼트가 없어서 오류가 발생한다. export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> </View> <StatusBar style="auto" /> ); }

 - return에 의해 렌더링 할때에는 소괄호로 감싸져 있어야한다. 

 

- JSX문법 안/밖에서의 주석처리가 다르다.

//JSX문법 밖에서의 주석처리

{/* JSX문법 안에서의 주석처리 */}