Frontend/React

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

2024. 12. 14. 10:00·Frontend/React
목차
  1. React와 React Native
  2. ✨ 기술적 차이점
  3. 📌 React 가 적합한 경우
  4.  
  5. 📌 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)
  • 앱스토어 / 구글 플레이에 배포 시
  • 카메라, 위치, 알림, 센서, 블루투스 등 네이티브 기능 사용 시

 


 

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

저작자표시 비영리 변경금지 (새창열림)

'Frontend > React' 카테고리의 다른 글

[React] 컴포넌트에 대한 고찰  (1) 2024.12.18
[React] 프로젝트 구동 방식  (1) 2024.12.17
[Vite] React + TypeScript 기반 프로젝트 생성하기  (2) 2024.12.15
[React] Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결  (2) 2023.11.11
[React] digital envelope routines::unsupported (error:0308010C) 오류 해결  (2) 2023.11.10
  1. React와 React Native
  2. ✨ 기술적 차이점
  3. 📌 React 가 적합한 경우
  4.  
  5. 📌 React Native 가 적합한 경우
'Frontend/React' 카테고리의 다른 글
  • [React] 프로젝트 구동 방식
  • [Vite] React + TypeScript 기반 프로젝트 생성하기
  • [React] Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결
  • [React] digital envelope routines::unsupported (error:0308010C) 오류 해결
sol_git
sol_git
Full-Stack을 꿈꾸는 Junior Developer💖
    로그인
  • sol_git
    솔깃한 Dev
    sol_git
  • 글쓰기 관리자
  • 전체
    오늘
    어제
    • 분류 전체보기 (40)
      • Frontend (13)
        • Javascript (1)
        • React (9)
        • Vue (1)
        • Svelte (1)
      • Style Sheet (0)
        • Sass (0)
      • Backend (4)
        • Java (3)
        • Python (1)
        • Spring Boot (0)
      • AI (0)
        • LLM (0)
        • Gen AI (0)
      • DevOps (16)
        • Git (16)
        • Kubernetes (0)
      • Cloud (0)
        • AWS (0)
      • DBMS (2)
        • MySQL (1)
        • PostgreSQL (1)
      • IDE & Tools (3)
        • IntelliJ (1)
        • VS Code (1)
        • Tool (1)
      • OS (2)
        • Mac (2)
      • Project 일기 (0)
  • 블로그 메뉴

    • 방명록
  • 링크

    • Github
  • 인기 글

  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.3
sol_git
Frontend / React / 
[React] React와 React Native의 차이 비교

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.