[React Native를 다루는 기술] 1장, 리액트 네이티브 첫걸음을 공부해보자.

React Native를 다루는 기술을 공부하며 정리한 내용입니다.
저작권에 문제가 될 시, 글을 모두 내리겠습니다.
제가 공부한 내용이 더 많은 분들에게도 도움이 되었으면 좋겠습니다. 부족한 부분은 댓글을 통해서 피드백을 주신다면 언제나 반영하겠습니다. 감사합니다.
책에 대한 링크는 맨 아래에 있습니다.

---

$ yarn <스크립트 이름>

• 스크립트 이름 부분에는 android, ios, start를 넣어 구동시키면 됨.
  • android : 안드로이드 환경에서 앱을 구동하는 스크립트
  • ios : iOS 환경에서 앱을 구동하는 스크립트
  • start : Metro를 구동하는 스크립트android, ios 스크립트 사용 시 새로운 터미널에서 start 스크립트가 자동으로 시작되기 때문에 start 스크립트를 사용할 일은 드묾
  • → Metro : 리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일들을 모두 읽어서 올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행할 준비를 해 줌.

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

• 프로젝트의 엔트리 파일 → 생성한 리액트 네이티브 앱은 이 파일에서 시작함.
• 이 곳에서 import 구문을 통해 코드를 불러오고 앱을 번들함.
• @format 이라는 키워드는 코드 스타일을 자동으로 정리해주는 preffier라는 도구와 관련 있음.

App.tsx

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

• @flow 라는 키워드는 정적 타입 시스템을 사용하게끔 해 줌. → 변수, 파라미터, 함수의 반환값 등에 타입을 사전에 지정해 코드를 작성함
• 위의 코드들은 리액트 네이티브에 내장된 특별한 컴포넌트들로, StyleSheet는 컴포넌트를 스타일링해주는 API

 

 

도서 링크 바로가기

https://www.yes24.com/Product/Goods/104643906

리액트 네이티브를 다루는 기술 - 예스24