[React] React와 React Native의 차이 비교

요즘 채용 시장을 쭉 훑어보니 Vue보다 React의 비중이 훨씬 높은 것 같다.
기존에 Vue 기반 프로젝트를 찐하게 해오던 상황이라, React로도 경험을 쌓아봐야할 것 같아 제대로 공부해보기로 했다.
이미 SPA 프레임워크에 대한 이해는 어느 정도 되어있는 상황이라, 빨리 적응할 수 있지 않을까?

React와 React Native

• 두개는 용도가 다르기 때문에, 프로젝트의 목적에 따라 어떤 것을 사용할지 결정해야 한다.

항목	React	React Native
플랫폼	웹 (PC/모바일 웹 브라우저)	iOS, Android (모바일 앱)
언어	HTML, CSS (JSX), JavaScript/TS	JavaScript/TS (네이티브 컴포넌트)
렌더링 방식	DOM (HTML) 렌더링	네이티브 뷰(Android, iOS) 렌더링
UI/스타일링	CSS, SCSS, Tailwind CSS 등	Flexbox 기반 스타일 (CSS와 유사)
배포 방식	URL(웹사이트로 배포)	App Store, Google Play 배포
재사용성	웹 전용 코드	iOS/Android에 동일 코드 사용 가능
성능	빠른 웹 성능	네이티브 앱 수준의 성능
개발 속도	빠름 (브라우저 바로 미리보기)	iOS/Android 빌드에 시간 소요
빌드 및 배포	Vercel, Netlify, AWS 등	Expo, Xcode, Android Studio 필요
학습 곡선	상대적으로 쉬움	React + 네이티브 모바일 지식 필요
사용 사례	웹 애플리케이션, 웹 포트폴리오	모바일 앱 (iOS/Android)

---

✨ 기술적 차이점

항목	React	React Native
스타일링 방법	Tailwind, SCSS, CSS	Flexbox 스타일링 (CSS와 비슷)
UI 구성 요소	<div>, <button>, <span>	<View>, <Text>, <Button>
네이티브 API	X	GPS, 블루투스, 카메라 등 가능
핫 리로딩	빠름 (웹 브라우저)	느림 (iOS, Andriod 빌드 필요)
배포 속도	빠름 (Vercel, Netlify)	느림 (App Store / Google Play 검수)
개발 난이도	상대적으로 쉬움	상대적으로 어려움 (iOS 빌드 필요)

---

📌 React 가 적합한 경우

• 웹사이트 / 웹 애플리케이션을 만들 때
• SPA (단일 페이지 애플리케이션) 개발이 목표일 때
• 반응형 디자인 (데스크톱 / 모바일 웹 동시 대응)
• 브라우저 접근이 필요할 경우 (URL 공유)

 

📌 React Native 가 적합한 경우

• 모바일 앱 만들 때 (iOS / Android)
• 앱스토어 / 구글 플레이에 배포 시
• 카메라, 위치, 알림, 센서, 블루투스 등 네이티브 기능 사용 시

 

---

 

개발할 프로젝트의 아키텍처에 따라 선택해서 사용해야겠다.