React vs React Native | React와 React Native 차이점 | React와 React Native 어떤걸 써야 하나요? | React와 React Native 모바일앱 개발

React와 React Native는 이름은 비슷하지만 용도와 실행 환경이 다른 기술, React와 React Native언어가 어떤 언어인지 어떻게 다른지 어떻게 사용하는지에 대한 정리하였습니다. JavaScript 언어 기반이며, React(리액트)를 기반으로 만들어진 두개의 언어 React와 React Native만에 대해서 알고 싶으신분드을 위해 정리하였습니다.

✅ 요약 비교: React vs React Native

항목	React	React Native
개발 목적	웹 애플리케이션 개발	모바일 앱(Android/iOS) 개발
출력 결과	HTML, CSS, JavaScript로 웹 브라우저에 표시	실제 iOS/Android 네이티브 앱
UI 구성 요소	<div>, <span>, <button> 등 HTML 요소 사용	<View>, <Text>, <Button> 등 Native 요소 사용
스타일링 방식	CSS, styled-components 등 웹 스타일 방식	StyleSheet.create() 또는 inline JS 스타일
실행 환경	브라우저 (크롬, 사파리 등)	스마트폰 또는 에뮬레이터
주요 라이브러리	React Router, Redux 등	React Navigation, Expo, AsyncStorage 등
빌드/배포	웹 서버에 배포	앱스토어/구글플레이에 배포

🧠 더 쉽게 이해하기

비유	React	React Native
자동차	웹사이트를 만드는 자동차	스마트폰 앱을 만드는 자동차
빵집 도구	오븐용 빵틀 (브라우저용 UI)	찜기용 빵틀 (스마트폰용 UI)

✅ 코드 예제 비교

React (웹)

function App() {
  return (
    <div>
      <h1>Hello Web</h1>
      <button onClick={() => alert('Clicked!')}>Click me</button>
    </div>
  );
}

React Native (모바일)

import { View, Text, Button } from 'react-native';

function App() {
  return (
    <View>
      <Text>Hello Mobile</Text>
      <Button title="Click me" onPress={() => alert('Clicked!')} />
    </View>
  );
}

☝️ 태그명과 UI 요소가 서로 다르죠? div → View, h1 → Text

✅ 언제 어떤 걸 써야 할까요?

사용 목적	선택할 기술
웹사이트 (PC/모바일 웹 포함)	✅ React
스마트폰 앱 (Android/iOS)	✅ React Native
두 플랫폼 모두 필요	React + React Native 따로 또는 Flutter 등 크로스 플랫폼 고려

✅ 마무리 정리

React는 웹 페이지 만들 때 사용
React Native는 모바일 앱 만들 때 사용
둘 다 JavaScript 기반이며, React 문법과 개념은 공유
UI 구성 방식과 실행 환경은 다름