Expo 클라이언트 설치
sudo npm install -g expo-cli
실행(Expo / React-native)
Npm start (or expo start) // npx react-native start => npx react-native run-android
App.js는 라이브러리, 기능들을 이용해 앱화면을 구성하는 함수
렌더링: JSX문법을 화면에 그려준다는 행위, 동작을 일컬음
(코드로 짜인 데이터를 변환하여 브라우저나, 앱에 전달하는 과정)
- JSX는 자바스크립트의 확장 문법으로, XML과 유사하게 생겨, 화면의 영역들을 구성함
(JSX는 코드가 브라우저나 웹에서 실행되기 전에 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태 코드로 변환됨) - 바벨은 ES6로 작성한 코드를 Node가 이해하게 변환하는 자바스크립트 컴파일러
- 번들링은 모듈(분리된 파일)들을 의존성관계를 파악해 그룹화시켜주는 것
- XML은 HTML과 다르게 데이터를 보여주기만 하는 목적이 아닌, 전달하고 저장하는 목적으로 만들어짐
JSX 문법
- 모든 태그는 가져와서 사용(리액트나 리액트네이티브는 라이브러리)
- return에 의해 렌더링될 때 항상 소괄호로 감싸져야 함
- JSX문법 밖과 안의 주석은 다름(밖은 // , 안은 {/ JSX 문법 안에서의 주석 /} )
- 엘리먼트(화면의 한 영역):View, Text 등등
JSX 엘리먼트
- View: 화면의 영역을 담당(분할하고, 영역을 잡으려면 StyleSheet와 같이 사용하여야함)
- Text: 말그대로 텍스트를 작성하기 위해 사용(없으면 글이 화면에 나오지 않음)
- ScrollView: 앱화면을 벗어나는 영역을 감싸 스크롤하여 볼 수 있게끔 함(View영역을 감싸서 사용)
- Button(형식):
- return문 밖에서 작성한 함수
const click = () => {
Alert.alert('JSX 밖에서 함수 구현 가능!');
};
<Button onPress={click}/> - 애로우펑션으로 사용
<Button onPress={() => Alert.alert('Simple Button pressed')} />- TouchableOpacity: Button태그는 커스터마이징하기 비효율적인 경우가 많기에
태그 안에 Text, View, Image 등 다양한 태그를 넣어서 사용가능 - Image: assets폴더 혹은 경로상의 이미지를 가져와 import해서 사용하거나
외부 이미지 링크를 넣어서 사용하는 방법이 있음
- import favicon from "./assets/favicon.png"
<Image source={favicon} resizeMode={"repeat"} style={styles.imageStyle} /> - <Image source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}} resizeMode={"cover"} style={styles.imageStyle} />
- resizeMode에는 cover(비율에 맞게 확대돼어 화면에 꽉참), contain(좌우만꽉차고 상하는 1/3정도), stretch(사이즈를 비율고려안하고 늘려서 화면꽉채움), repeat(원래사이즈 여러개로 화면 꽉참), center(상하좌우 간격있고 가운데정렬)가 있음
-
Styles: const styles =. StyleSheet. create({container{}, textContainer{}, })
-
Flex: 화면의 영역을 차지하는 개념( 전체를 감싸는 flex: 1일때, 그 안의 영역을 비율에따라 1:n 이런식으로 하위 엘리먼트에 매김)
-
Flexdirection: 기본값 column 이고 ‘row’로 하면 가로
-
JustifyContent: flexDirection: 'column'에서 justifyContent는 상하 정렬, flexDirection: 'row'에서 justifyContent는 좌우 정렬을 뜻하고, flex-start, center, flex-end, space-between(첫 플레스 항목과 마지막 항목을 시작과 끝에 배치후 중앙 항목을 같은 간격으로 나열), space-around(모든 항목을 같은 간격으로 나열)
-
AlignItems: justifyContent와 반대로 정렬 column -> 좌우정렬 / row -> 상하정렬
Flex-start, center, flex-end, stretch(alignitems의 방향으로 컴포넌트 확장) -
경로
./ : 현재 파일과 동일한 위치
../: 현재 파일의 상단 위치 -
{}표현식 안에서 조건문 사용(삼항 연산자)
조건 ? 참일때 실행 : 거짓일때 실행
