TIL 67 | React Native 시작하기
React Native 란?
페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다. 맥 OS 환경에서 리액트 네이티브를 사용하기 위해서는 Xcode를 설치해야 한다.
Expo
Expo는 리액트 네이티브를 베이스로 iOS, AOS, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있도록 도와주는 프레임워크이다. Expo는 바닐라 react-native로 앱을 개발할 때 초기에 해줘야 하는 여러가지 환경 설정이나 빌드를 쉽게 해준다. 쉽고 빠르게 개발을 할 수 있다는 장점이 있지만, react-natvie에서 널리 사용되는 라이브러리들을 사용하기 위해서는 eject 가 필요하다. 초반에 리액트 네이티브를 익힐때까지는 Expo를 사용하는 것이 도움이 될 수 있다.
Expo tutorial
https://expo.io/learn 에 잘 설명되어 있다.
1. Expo 설치하기
터미널에서 $ npm install expo-cli --global
을 입력한다. 에러가 나는 경우가 잦은데 그럴 때는 $ sudo ~
로 설치한다.
2. 프로젝트를 준비하기
$ expo init myNewProject
$ cd myNewProject
$ expo start
3. Start Coding!
Vs Code, Atom 등 원하는 에디터에서 빌드 된 폴더를 연다.
4. Expo Client 설치
스마트폰에서 Expo Client를 설치, 로컬호스트 화면의 QR 코드를 찍으면 실시간으로 변화하는 UI 를 모바일 화면에서 확인이 가능하다.
App.js 초기 화면
리액트 네이티브는 모바일 어플리케이션을 개발하기 위한 언어이기 때문에 <h1>
, <p>
, <div>
등 JSX 에서 사용하는 태그와는 다른 컴포넌트 형식으로 구성되어 있다. 주의! 리액트 네이티브에서는 App.js 파일을 삭제하면 안된다!
리액두네이티부 맛보기 🤩
컴포넌트에 style 주기
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<TouchableOpacity>
<Text style={styles.centerText}>나는 지형 😎</Text>
</TouchableOpacity>
<StatusBar style="light" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#000",
alignItems: "center",
justifyContent: "center",
},
centerText: {
fontSize: 50,
color: "white",
},
});
컴포넌트안에 style={styles.container}
를 추가해서 하단에 스타일을 적용할 수 있다. React 의 Styled-component 라이브러리와 비슷한듯 다른 형태..!
Basic Components
컴포넌트는 상단에 임포트해서 사용한다.
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Alert,
Switch,
} from "react-native";
<TouchableOpacity>
로 UI를 감싸는 경우 탭 할 때 Opacity가 살짝 변하는 효과가 나타난다. 즉 사용자에게 터치가 되었다는 표시가 될 수 있다.
활용 예시
export default function App() {
const onPress = () => {
console.log("onPress");
Alert.alert("띠용");
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={onPress}>
<Text style={styles.centerText}>테스트 😎</Text>
</TouchableOpacity>
</View>
);
}
테스트 글자를 탭하는 경우 Alert 창이 나타난다.
<Switch />
true/false 값을 토글하는 boolean 스위치
<ActivityIndicator />
로딩중임을 나타내는 인디케이터 (뱅글뱅글)
Author And Source
이 문제에 관하여(TIL 67 | React Native 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyounglee/TIL-67저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)