React Native 공부를 시작해 보자
지금까지 웹 개발을 해오다가, 앱 개발에 대한 관심이 생겼다.
'센서, 카메라, GPS 등 모바일 기기 하드웨어를 사용한 서비스를 한 번 만들어보고 싶다!', '모바일 시대에 앱개발은 한 번은 해봐야지!' 란 생각이 들었다.
지금부터 당찬 포부를 가지고 시작해보자!
React Native 원리를 이해해 보자
그럼 왜 React Native를 선택했는가? 를 먼저 이야기해 보자면
우선 React.js로 웹 개발을 해왔기 때문에 앱개발에 대한 장벽이 조금 낮지 않을까란 기대로 선택하게 되었다.
웹의 경우 React.js와 react-dom 패키지와 함께 웹 앱을 구축하게 되는데,
앱은 React.js와 React Native를 이용해서 모바일 앱(iOS, Android) 구축이 가능하다.
React Native에는 React 컴포넌트가 내장되어 있는데, 이 컴포넌트는 iOS와 Android에 맞게 컴파일이 된다.
그리고 iOS와 Android 내장 하드웨어 APIs를 Javascript로 사용할 수 있다고 한다.
import React from 'react';
import {Text, View} from 'react-native';
const YourApp = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Try editing me! 🎉</Text>
</View>
);
};
export default YourApp;
예시 코드와 같이 react-native의 View, Text 컴포넌트를 이용해서 UI를 만들 수 있고 컴파일을 통해 각 디바이스에 맞는 요소로 적용이 된다.
그렇다면 기능을 관리하는 스크립트 코드는 어떻게 실행이 될까?
React Native에는 앱의 로직을 처리하는 JS thread를 가지고 있다고 한다. 사용자의 입력이나 데이터 변화를 처리하는 코드가 이 스레드에서 실행된다고 이해하면 된다.
React Native 프로젝트를 생성해 보자
프로젝트 처음 세팅을 위해서는 개발 문서의 Get Started를 확인하고 설치하도록 한다.
설치한 시점의 버전은 0.74이다.
npx create-expo-app@latest
create-react-app과 같이 React Navtive에서는 create-expo-app으로 프로젝트를 쉽게 설치할 수 있다.
그리고 package.json 파일을 잠시 살펴보면, expo 명령어로 앱을 실행하는 것을 알 수 있다. 공식 문서를 보면, expo는 Android 및 iOS 앱을 더 쉽게 개발할 수 있는 프레임워크라고 소개하고 있다.
{
"name": "my-react-native",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2",
"expo": "~51.0.26",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.21",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~51.0.3",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
"private": true
}
제대로 설치가 되었다면, 실행을 해보자.
npx expo start
아래와 같이 QR 코드가 나온다.
로컬에서 앱을 실행해 보자
터미널 내용 중에 아래와 같이 안내 문구를 확인할 수 있다.
> Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
나는 iOS를 사용 중이라, 카메라 앱으로 QR을 스캔하였고, Expo 패키지에서 제공하는 Expo Go 앱을 설치하여 화면을 확인할 수 있었다.
웹에서 "Hello, World!"를 처음 본 순간 같았다!
시작의 반이라고 환경 세팅을 해보았다.
그럼 다음으로 Android studio와 Xcode의 시뮬레이터 설치를 하고 개발을 시작해보자!
'Develop' 카테고리의 다른 글
'오늘 하루 그만 보기' 정보는 어디에 저장이 될까? (0) | 2024.07.22 |
---|---|
[React + Typescript] SelectBox Component는 어떻게 만드는게 좋을까? (1) | 2024.06.16 |
[React] 나의 프로젝트에 맞는 state 상태관리는? - Context 편 (0) | 2024.05.31 |
[Tailwind CSS] React+Vite 환경에 설치, 그런데 적용이 안됨. 왜죠? (0) | 2024.05.22 |
[공공데이터] API 인증키 오류 _ 'SERVICE KEY IS NOT REGISTERED ERROR' (0) | 2024.05.11 |