프론트 엔드
[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의 문서를 참조하여 애플리케이션을 개발할 수 있습니다.
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
반응형