반응형
[React Native] 시작하기
Mobile/React Native2022. 8. 27. 21:44[React Native] 시작하기

React Native 란 리액트는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술입니다. 리액트 네이티브는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트입니다. 기존의 하이브리드 앱은 WebView에 화면을 만들어 놓고 모바일 앱에서 접근하는 것이었기 때문에 퍼포먼스가 떨어지고, 모바일 앱과의 괴리감이 있었습니다. 리액트 네이티브는 실제 네이티브 UI를 사용하여 모바일 앱을 구현합니다. 퍼포먼스는 올라가고 괴리감도 사라지게 됩니다. 리액트 네이티브를 사용하면 JavaScript를 사용하여 모바일 앱을 제작할 수 있습니다. 리액트와 동일한 디자인을 사용하여 선언적 구성 요소에서 풍부한 모바일 UI를 구성할 수 있습니다. 장점 높은 생산성 리액트를 사용하여 개발해 보신분이라면 처음부터..

[React Native] Expo 사용 방법
Mobile/React Native2022. 8. 26. 22:30[React Native] Expo 사용 방법

Expo 리액트 네이티브는 리액트 아키텍처를 모바일에 적용한 것으로, ES6 문법과 리액트를 이용해 모바일 애플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. 리액트 네이티브 프로젝트 생성 시 react-native init 을 입력하여 사용하였습니다. 이것만으로도 충분하다고 느껴졌는데 다른 강좌를 보던 중에 Expo 툴을 발견하게 되었습니다. Expo는 리액트 네이티브 애플리케이션의 빌드를 돕는 툴입니다. 네이티브 API에 접근하는 것도 쉽게 만들어주고, 안드로이드와 iOS 버전을 알아서 빌드해 줍니다. 무엇보다 코드를 수정하면 바로 hot reloading 시켜주는 것이 가장 편합니다. 작년 12월 쯤에 리액트 네이티브를 알게 되고 최근에 Expo도 접하게 되면서 찾던 중 처음에는 Expo Xd..

[React Native] Live Reload
Mobile/React Native2022. 8. 26. 22:01[React Native] Live Reload

Live Reload 리액트 네이티브 기반으로 안드로이드 앱 개발을 할 때 자동으로 리로드 되게 하려면 어떻게 해야 할까. 리액트 기반으로 웹 개발을 할 때에는 코드를 수정 시 자동으로 리로드 되었는데 리액트 네이티브로 개발할 때에 자동으로 되지 않아 검색하던 중 아래 내용처럼 옵션 설정을 하니까 잘 동작하였다. 명령 프롬프트에서 다음을 입력하여 장치 또는 에뮬레이터에서 앱을 설치하고 실행한다. $ react-native run-android 에뮬레이터를 클릭하고 CTRL + M ( MacOS의 경우 CMD + M )을 누르거나 실행 중인 응용 프로그램이 있는 Android 장치를 흔들면 된다. 팝업 메뉴에서 Enable Live Reload 옵션을 선택한다.

반응형
image