티스토리 뷰
안녕하세요. 앱 개발에 관심이 생겨 제가 주로 사용하는 React와 비슷한 React Native 공부를 시작하게 됐습니다.
이번 포스팅에서는 React Native가 어떤 건지 간단하게 이야기해보려고 합니다. 제가 공부한 내용을 정리한 문서임을 참고해주세요.
React Native란?
React Native는 Facebook에서 개발한 오픈소스 모바일 애플리케이션 개발 프레임워크입니다. 이 프레임워크는 웹 개발에 사용되는 React와 유사한 방식으로 작동하지만, 이를 이용해 네이티브 모바일 애플리케이션을 개발할 수 있습니다.
React Native의 동작 원리를 간단히 설명하자면, 우리가 작성하는 React 컴포넌트는 React Native를 거쳐서 Bridge라는 중간체를 통해 iOS와 Android로 전달됩니다. Bridge는 이 컴포넌트들을 각 플랫폼의 네이티브 코드로 변환해주는 역할을 담당합니다.
React Native의 가장 큰 장점 중 하나는, 기존에 React를 다루는 개발자라면 쉽게 접근할 수 있다는 점입니다. 또한, 코드를 심사 받지 않고 빠르게 업데이트할 수 있어, 빠른 반복 개발이 가능합니다. 하지만 경우에 따라 네이티브 배포가 필요할 수도 있습니다. 그리고 크로스 플랫폼을 지원하기 때문에 웹과 iOS, Android 모두에 대응 가능한 애플리케이션을 만들 수 있습니다.
그러나, 단점들도 존재합니다. 일부 기능들은 네이티브 코드에 직접 접근해야 하며, 라이브러리 의존성이 크다는 점이 있습니다. 또한, Bridge를 사용하기 때문에 네이티브 언어에 비해 성능이 약간 떨어질 수 있습니다. 마지막으로, React Native는 잦은 업데이트가 발생하는데, 이로 인해 개발 과정에서 어려움을 겪을 수 있습니다.
Expo CLI & React Native CLI
Expo CLI
Expo CLI는 React Native 개발을 위한 툴체인 중 하나입니다 . Expo CLI의 가장 큰 장점 중 하나는 기본 제공되는 API와 라이브러리를 이용해 앱의 초반 개발 과정을 단순화할 수 있다는 것입니다. 또한, Expo Go 앱만 있다면, 어떤 기기에서든 프로젝트를 실행할 수 있습니다.
그러나, Expo CLI를 이용하면 제공되는 모듈만 사용할 수 있습니다. 따라서, 추가적인 네이티브 모듈을 사용하고 싶다면, Expo CLI는 제한적일 수 있습니다. 또한, Expo CLI를 이용한 앱에서는 인앱 결제 기능을 사용할 수 없습니다.
React Native CLI
React Native CLI는 또 다른 React Native 개발 툴체인입니다.
React Native CLI의 장점 중 하나는 네이티브 모듈을 연결할 수 있다는 것입니다. 이를 통해 다양한 라이브러리를 사용할 수 있습니다.
그러나, React Native CLI를 이용하면 기본 제공되는 라이브러리가 적습니다. 따라서, 대부분의 라이브러리를 직접 설치해야 합니다. 또한, React Native CLI를 이용한 iOS 앱 개발은 XCode 실행을 위해 Mac 환경이 필요합니다.
Expo CLI로 개발을 시작한 후에도 React Native CLI로 전환하는 것은 그리 어렵지 않습니다. 하지만, 어떤 툴체인을 선택할지 결정하기 위해서는, 구현하고자 하는 기능이 Expo에서 모두 지원되는지를 검토하는 것이 중요합니다.
Core Components
React Native에서는 화면을 구성할 때 기본적으로 사용되는 컴포넌트들이 있습니다. 이를 'Core Components'라고 부릅니다. 우리가 익히 알고 있는 Input, Button, Image, Text 등을 컴포넌트가 있다고 생각하시면 됩니다.
다음 글에서는 React Native의 Core Components에 대해 좀 더 자세히 다루도록 하겠습니다.
'React Native' 카테고리의 다른 글
React Native 2 (0) | 2023.05.02 |
---|
- Total
- Today
- Yesterday
- vuex
- vue3
- 호이스팅
- react native
- typescript
- Cypress
- JS
- Store
- NUXT
- react query
- Front
- react-query
- vuetify
- react
- Core Components
- vue
- vue.js
- 포트폴리오
- composition
- Redux
- 자바스크립트
- 타입스크립트
- three.js
- 퍼블리셔
- e2e
- pinia
- pagination
- backend
- CORS
- frontend
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |