[수업 목표]
- 앱 개발 준비 - 리액트 네이티브(기술) & Expo(도구) 소개 및 설치
- 앱 화면 만들기
- 앱에서 자주 사용되는 자바스크립트 연습하기
- [앱 화면 만들기] 리액트 네이티브에서 화면을 그리는 방법
구역(레이아웃)을 잡는 문법 언어를 JSX라고 부른다.
//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용합니다.
import { Text, View } from 'react-native';
<View>
<Text>Hello, I am {props.name}!</Text>
</View>내가 개발중인 레이아웃의 결과를 볼 수 있게 expo를 설치하여 개발환경과 연결한다!!
-리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴입니다. 또한 앱 개발을 편리하게 해주는 도구들이 많이 존재합니다.
Node vs NPM vs Yarn 비교
미리 만들어놓은 자바스크립트 선물 상자들을 가져와서 적재적소에 사용해 나아갑니다. 이때 필요한게 Node고 NPM 입니다.
Node.js로 자바스크립트 개발 환경을 구축하고,
NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습이라 보면 됩니다.
yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴입니다.
그리고 마지막으로 Expo 도구 설치!!
JSX 문법
화면을 구성하는 태그문법
JSX 문법상의 꺽쇠를 태그라고 부르고,
<View>영역</View>과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할 때 JSX에선 엘리먼트라 부릅니다.내가 이번에 배운 태그들!!
<View>, <Text>, <ScrollView>View: 화면을 분할하고 영역을 잡아나가려면 오늘 배울 스타일 문법(StyleSheet)과 같이 사용해야 가능합니다.
따라서 여기서 View는 화면의 영역을 잡는 엘리먼트라고만 알아두고, 강의를 진행하며 자세히 다루면서 연습해 나아가겠습니다.
Text: 앱에 글을 작성하려면 반드시 사용해야하는 엘리먼트입니다.
<Button>, <TouchableOpacity/>, <Image>TouchableOpacity: 이 영역은 스타일은 주지 않은 이상 화면에 영향을 주지 않는 영역을 갖습니다. TouchableOpacity에도 onPress 속성이 있습니다.
두 가지 방식이 있습니다. assets 폴더에 있는 이미지를 가져와서 사용하는 방법과 (import),
외부 이미지 링크를 넣어서 사용하는 방식입니다(uri).
모든 태그에 공통적으로 있는 styles 속성
''
기본뼈대 구조
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return ( );
}
const styles = StyleSheet.create( textContainer:{ }, container: { });