리액트(React)와 리액트 네이티브(React Native) 차이점

 사용 목적

 

리액트 (React) : 

• 웹 어플리케이션 개발 목적
• HTML DOM을 조작하며, 브라우저에서 실행되는 SPA(Single Page Application)를 만듦

 

리액트 네이티브 (React Native) :

• iOS와 안드로이드용 모바일 개발 목적
• HTML이 아님 네이티브 컴포넌트를 사용, 네이티브 앱을 만듦

 

 

 렌더링 방식

 

리액트 (React) : 

• HTML과 CSS를 조합한 웹 UI를 생성
• 브라우저 내에서 가상 DOM을 사용하여 렌더링

예시:

React 코드

<div>
  <h1>Hello, World!</h1>
  <button>Click Me</button>
</div>

 

 

리액트 네이티브 (React Native) :

• 네이티브 UI 컴포넌트를 사용하여 네이티브 앱을 생성
• 가상 DOM 대신 JavaScript와 네이티브 컴포넌트 간의 브릿지를 통해 UI를 업데이트

예시:

React Native 코드

<View>
  <Text>Hello, World!</Text>
  <TouchableOpacity>
    <Text>Click Me</Text>
  </TouchableOpacity>
</View>

 

 

 스타일링 및 레이아웃

 

 

리액트 (React) : 

• CSS 또는 CSS 라이브러리를 사용
• 웹 스타일링에 적합한 flexbox, grid, media queries 등을 지원

JSX

import React from 'react';
import './styles.css';

export default function App() {
  return (
    <div className="container">
      <div className="box">Box 1</div>
      <div className="box">Box 2</div>
      <div className="box">Box 3</div>
    </div>
  );
}

 

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.box {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
  text-align: center;
  border-radius: 5px;
}

 

 

리액트 네이티브 (React Native) :

• CSS가 아닌, JavaScrip 스타일 객체를 사용하여 스타일을 지정
• Flexbox 레이아웃만 지원하며, 플랫폼별 스타일링 (안드로이드 / iOS)을 고려해야 함

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.text}>Box 2</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.text}>Box 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box: {
    backgroundColor: 'blue',
    padding: 20,
    margin: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    textAlign: 'center',
  },
});

 

 

 이벤트 처리 방식

 

리액트 (React) : 

• DOM 이벤트 사용 (예: onClick, onChange) 등

<button onClick={() => console.log('Clicked!')}>Click Me</button>

 

 

리액트 네이티브 (React Native) :

• 네이티브 이벤트 사용 (예: onPress, onChangeText) 등

<TouchableOpacity onPress={() => console.log('Pressed!')}>
  <Text>Click Me</Text>
</TouchableOpacity>

 

 

 네이티브 기능 접근

 

리액트 (React) : 

• 브라우저 API와 통합 (예: localStorage, document, window)

 

리액트 네이티브 (React Native) :

• 네이티브 장치 기능 접근은 별도 모듈 사용 (예: react-native-camera, react-native-geolocation)

 

 

 라우팅

 

리액트 (React) : 

• react-router와 같은 웹 전용 라우팅 라이브러리를 사용

 

리액트 네이티브 (React Native) :

• react-navigation 라이브러리를 사용하여 스택 네비게이션, 탭 네비게이션 등을 구현

 

 

 코드 실행 환경

 

리액트 (React) : 

• 웹 브라우저에서 실행
• 결과물은 웹 페이지 (HTML/CSS/JavasScirpt)

 

리액트 네이티브 (React Native) :

• 모바일 디바이스에서 실행
• 결과물은 네이티브 모바일 어플리케이션

 

 

 플랫폼 종속성

 

리액트 (React) : 

• 모든 웹 브라우저에서 실행되며, 플랫폼 차이가 없음

 

리액트 네이티브 (React Native) :

• iOS와 안드로이드에서 동작하지만, 일부 네이티브 컴포넌트는 플랫폼별로 다르게 구현해야 함