앱개발(JS)

앱개발 학습. 화면 만들기(JSX 기본 문법)

이로이카 2022. 9. 1. 22:39
728x90

 

// 앱개발 종합반 - 2주차(스파르타코딩클럽)

JSX, 화면을 구성하는 태그 문법

  • return 은 작성한 JSX문법으로 구성된 화면을 앱상에 보여주는 역할
  • 이 동작을 렌더링이라고 함
  • JSX는 <View>...</View> 꺽쇠 형태 태그로 쓰여짐
    • Html 태그와 구성이 비슷하다. 사용법도 유사할것같다

JSX 기본 문법

 

View · React Native

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running o

reactnative.dev

  • 태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용해야 함
  • 모든 엘리먼트를 감싸는 최상위 엘리먼트가 있어야 함. 엘리먼트는 곧! 태그 <>
<View style={styles.container}>
      <Text style = {styles.textStyle}>스파르타 이얍얍</Text>
      <StatusBar style="Auto" />
    </View>
  • return에 의해 렌더링 될 땐 항상 소괄호()로 감싸져야 한다.
  • JSX 문법 밖에서의 주석과 안에서의 주석은 다르다!
    • return 문 안(태그 안)은 JSX의 영역이고
    • 밖은 Javascript의 영역