ㅇJSX(JavaScript XML): 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어
//잠시 살펴보는 JSX !!!
//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용합니다.
import { Text, View } from 'react-native';
<View>
<Text>Hello, I am {props.name}!</Text>
</View>ㅇExpo: 
ㅇNode.js로 자바스크립트 개발 환경을 구축, NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용
ㅇyarn 설치
//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
npm install -g yarn
//설치가 완료된다음
yarn -v
expo login --username "Expo 사이트 가입당시 입력한 name"
...
expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!ㅇexpo start , 끌땐 ctrl + c
ㅇ맥은 안드로이드 스튜디오와 Xcode 모두 설치가 가능
ㅇExpo 프로젝트 폴더 구조
-assets: 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더
-node_modules: 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소
-App.js: 리액트 네이티브 앱이 시작되는 출발선 및 진입점. 앱의 화면을 그려주는 커다란 함수(리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을 그려주는 커다란 함수)
-app.json: 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등 앱이 가지는 기본 정보들을 설정하는 파일
ㅇ 렌더링(rendering): JSX문법을 화면에 그려준다는 행위, 동작
ㅇ리액트 네이티브 공식 문서 : https://reactnative.dev/docs/view
ㅇExpo 공식 문서: https://docs.expo.io/versions/v38.0.0/react-native/view/
ㅇ모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야 함. 엘리먼트는 곧! 태그 <>
//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>
);
}아래는 감싸는 엘리먼트가 없다면 오류 발생
//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" />
);
}ㅇ 버튼 설명서: https://reactnative.dev/docs/button
ㅇ 팝업 알람(Alert) 설명서: https://reactnative.dev/docs/alert#docsNav
ㅇ Image 태그 사용 설명서: https://reactnative.dev/docs/image#docsNav
ㅇ모든 태그에 공통적으로 있는 styles 속성
-StyleSheet 은 결국 객체(딕셔너리)를 하나 만드는데, 이쁜 옷들을 정리해 놓는 객체 입. 이 객체에 옷을 사용법 대로 생성한 다음 잘 정리해 두고, JSX 엘리먼트에서 사용
-자주 사용하는 스타일 속성
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>스파르타 코딩클럽!!</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
//영역을 잡는 속성입니다. 따로 자세히 다룹니다.
//flex: 1은 전체 화면을 가져간다는 뜻입니다
flex: 1,
//영역의 배경 색을 결정합니다
backgroundColor: '#fff',
//아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다.
//flex를 자세히 다룰때 같이 자세히 다룹니다
justifyContent:"center",
alignContent:"center"
},
textContainer: {
//영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
margin:10,
//영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
padding: 10,
//테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
borderRadius:10,
//테두리의 두께를 결정합니다
borderWidth:2,
//테두리 색을 결정합니다
borderColor:"#000",
//테구리 스타일을 결정합니다. 실선은 solid 입니다
borderStyle:"dotted",
},
textStyle: {
//글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
color:"red",
//글자의 크기를 결정합니다
fontSize:20,
//글자의 두께를 결정합니다
fontWeight:"700",
//가로기준으로 글자의 위치를 결정합니다
textAlign:"center"
}
});ㅇ리엑트 스타일 공식 문서
https://reactnative.dev/docs/style#docsNav
https://reactnative.dev/docs/layout-props
(구글에 " react native [필요한 스타일] " 이런식으로 검색)
ㅇFlex: 앱 화면을 구성할 때 영역의 레이아웃을 결정(영역을 차지하는 속성), 사실 flex 가 가장 중요( flex는 상대적)
