(나의개발자일지) 2-2주차

9) App.js 구석구석 살펴보기

 

간단히는 App.js는 앱의 화면을 그려주는 커다란 함수.

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

expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인 가능

"Open up App.js to start working on your app!" 화면

 

//우리가 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내 사용할 기능들을
//이렇게 앞으로도 상단에 선언한다음 가져다 사용합니다.
import { StatusBar } from 'expo-status-bar'; -> 'expo-status-bar'라는 폴더에서 StatusBar라는 도구를 가져온 것
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';  - > 두줄은 모든 파일 상단에 들어가야함

//App.js는 결국 App 함수를 내보내기 하고 있는 자바스크립트 파일
export default function App() {              -> export default는 함수를 밖에 내보내겠다.
//화면을 반환합니다.
//HTML 태그 같이 생긴 이 문법은 JSX라 불리우며 실제 화면을 그리는 문법입니다,
//이번 강의에서 자세히 다룹니다

 

return 밖과 안에서의 코드는 역할이 다름

return 밖에서는 리액트에서 기본적으로 제공해주는 함수들을 사용

안에서는 화면이 그려지는 부분이 직접적으로 return 안이 됨.

style={styles.container} js문법에 옷을 입히는 코드들

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

// styles 변수 이름 답게 화면을 그려주는, 
//더 자세히는 JSX문법을 꾸며주는 내용을 담고 있습니다.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

---

노란색 경고창 안보이게 하기

//우리가 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내 사용할 기능들을
//이렇게 앞으로도 상단에 선언한다음 가져다 사용합니다.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, LogBox } from 'react-native';

//App.js는 결국 App 함수를 내보내기 하고 있는 자바스크립트 파일입니다.
//이 함수는 무언가?를 반환하고 있는데 결국 화면을 반고 있습니다.
export default function App() {
//화면을 반환합니다.
//HTML 태그 같이 생긴 이 문법은 JSX라 불리우며 실제 화면을 그리는 문법입니다,
//이번 강의에서 자세히 다룹니다

LogBox.ignoreLogs(['Warning: ...']);


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

// styles 변수 이름 답게 화면을 그려주는, 
//더 자세히는 JSX문법을 꾸며주는 내용을 담고 있습니다.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

---

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

 

App.js는 JSX문법으로 그려져 준비된 화면을 반환합니다. 반환 한다는 게 잘 와닿지 않다면, 단순히 화면을 그려준다 생각하면 편합니다. 즉, 리액트 네이티브에서 return은 여러분이 작성한 JSX문법으로 구성된 화면을 앱상에 보여주는 역할을 하는 겁니다. JSX문법을 화면에 그려준다는 행위, 동작을 이제 우린 렌더링(rendering)이라 부릅니다

 

<View> <Text>와 같이 꺽쇠로 쓰여져 있는 것들은 리액트 네이티브에서 JSX라고 부릅니다. 또하나의 화면을 그리는 문법입니다. JSX 문법상의 꺽쇠를 태그라고 부르고, <View>영역</View>과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할 때 JSX에선 엘리먼트라 부릅니다. 화면을 구성하는 최소한의 영역정도의 의미를 갖고 있습니다. 이 JSX 문법은 사용방법이 정해져있습니다.

 

공식문서: https://reactnative.dev/docs/view?redirected 

View · React Native

 

1) JSX 기본 문법

(1) 모든 태그는 가져와서 사용함

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

(3) 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야 함. 엘리먼트는 곧! 태그 <> 입니다

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

(5) JSX 문법 밖에서의 주석과 안에서의 주석은 다르다!