프론트 엔드

[React-Native]React-Native 시작하기

삼삼고 2023. 3. 21. 08:45

❓React-Native란

React Native는 Facebook에서 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다.
👉이는 React.js를 기반으로 하여 iOS 및 Android 애플리케이션 개발을 위한 선언적인 구문을 사용하며, 네이티브 애플리케이션과 동일한 성능을 제공합니다.

 

⚡React-Native의 특징

React Native는 많은 개발자들이 선택하는 프레임워크 중 하나이고 다음과 같은 장점을 가지고 있습니다.

📌크로스 플랫폼 개발

React Native를 사용하면 iOS와 Android 애플리케이션을 동시에 개발할 수 있습니다. 이는 개발 시간을 단축하고 애플리케이션의 사용자 범위를 확장할 수 있는 장점을 제공합니다.

📌높은 성능

React Native는 네이티브 애플리케이션과 거의 동일한 성능을 제공합니다. 이는 애플리케이션의 반응 속도와 사용자 경험을 향상할 수 있습니다.

📌재사용성

 React Native는 React.js와 동일한 구문을 사용하기 때문에, 기존의 React.js 웹 애플리케이션 코드를 재사용할 수 있습니다. 이는 개발 시간과 비용을 절감할 수 있는 장점을 제공합니다.

📌개발 생산성

 React Native는 빠른 개발 주기를 가지고 있으며, 라이브 리로딩(live reloading) 기능을 제공합니다. 이는 코드 변경 사항을 즉시 적용할 수 있어 개발 생산성을 높일 수 있습니다.

📌커뮤니티 지원

React Native는 Facebook을 비롯한 큰 회사들이 사용하고 있으며, 활발한 개발자 커뮤니티를 가지고 있습니다. 이는 문제 해결 및 개발 지원에 대한 자료 및 도움을 얻을 수 있는 장점을 제공합니다.

 

 

🔥React-Native로 프로젝트 시작하기

React Native를 사용한 프로젝트를 시작하는 방법은 다음과 같습니다.

1. React Native 환경 구성하기

React Native 개발을 위해 필요한 패키지인 Expo CLI를 설치합니다. 
👇아래 명령어를 실행하여 Expo CLI를 설치합니다.
npm install -g expo-cli
React Native Web은 React Native 코드를 Web 앱으로 변환해주는 프레임워크입니다.
다음 코드를 사용하여 React Native로 작성한 앱을 Web에서 실행할 수 있습니다.
npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

2. 새로운 프로젝트 생성하기

Expo CLI를 이용하여 새로운 프로젝트를 생성할 수 있습니다.
👇프로젝트 생성 명령어는 다음과 같습니다.
expo init [프로젝트 이름]
위 명령어를 실행하면 프로젝트 종류를 선택하는 화면이 나오는데, 여기서는 "blank"를 선택합니다. 그리고 프로젝트 이름을 입력하면 새로운 프로젝트가 생성됩니다.

3. 새로운 프로젝트 실행하기

프로젝트 폴더로 이동하여 아래 명령어를 실행하여 프로젝트를 실행합니다.
cd [프로젝트 이름] npm start
위 명령어를 실행하면 Expo 개발 도구가 실행되고, 개발자는 브라우저를 통해 Expo 개발 도구를 사용하여 애플리케이션을 개발할 수 있습니다.

4. 애플리케이션 개발하기

 React Native는 JavaScript를 사용하여 애플리케이션을 개발합니다. 애플리케이션의 화면은 React 컴포넌트로 구성되며, 애플리케이션의 비즈니스 로직은 JavaScript 함수로 작성됩니다. 개발자는 React Native의 문서를 참조하여 애플리케이션을 개발할 수 있습니다.

https://reactnative.dev/

 

React Native · Learn once, write anywhere

A framework for building native apps using React

reactnative.dev

 
설치한 후 터미널의 QR 코드를 스캔하여 앱을 실행하거나, 앱을 실행할 기기에서 Expo Go 앱을 설치하고, Expo Go 앱에서 "Scan QR Code" 버튼을 누른 다음, QR 코드를 스캔할 수 있습니다.

애플리케이션이 실행되면 개발자 메뉴를 열어, 디버그, 리로드, 메뉴 토글 등의 기능을 사용할 수 있습니다. w키를 누르면 웹에서도 애플리케이션을 실행할 수 있습니다.

 

728x90
반응형