[React & React Native] React와 React Native의 차이점

토남토냥(박인성)·2024년 6월 29일
Reactreact native앱 개발프런트엔드

REACT

목록 보기
1/1
post-thumbnail

"React와 React Native의 차이를 간단히 설명하면 React는 웹 개발, React Native 앱 개발이 아닐까."

-tthonam(작성자)-

🔧 목차(Table of contents)

⚒️ 1. React 와 React Native
⚒️ 2. React와 React-Native의 동작
⚒️ 3. React와 React Native 차이점
🗝️ 참고 링크(Reference)

✈️ 들어가며

⚙️ React Native 란?

JS(TS)로 사용 ➡️ IOS와 Android 모바일 앱을 동시에 개발, 크로스 플랫폼

  • React 개발자라면 누구든지 쉽게 시작할 수 있음
  • JS 스레드가 Native Bridge를 통해 Native Thread와 통신,
    Native Bridge가 없으면 JS 코드가 Native 코드와 통신 X
  • Native Bridge를 사용하여 Native Thread를 연결시켜 동작하기 때문에 Native 개발 방식보다는 성능 ⏬
  • Hybrid App : 웹을 사용 하지 않고, Native와 통신하는 방법을 사용하는 것
    EX) Xamarin, Flutter 등

React Native를 써보지는 않았지만 차이는 대략적으로 예상이 간다.
우선은 React를 쓰면서 더 연습해보자.

🛫 시작하며

⚒️ 1. React 와 React Native

🔨 React

페이스북에서 만든 웹 개발을 위한 프론트엔드 JS 라이브러리

  • UI를 구축하기 위한 JS 라이브러리. 주로 웹 애플리케이션의 프론트엔드 개발에 사용, '컴포넌트'라는 개념을 통해 재사용 가능한 UI 조각을 만들 수 있게 도와줌.
  • EX) React 컴포넌트 ➡️ 여러 페이지에서 재사용위해 웹사이트 버튼이나 입력 필드 같은 요소 제작.

⛏️ React Native

React의 방식으로 네이티브 앱을 개발, 페이스북의 오픈 소스 모바일 애플리케이션 프레임워크

  • React의 원칙 사용 ➡️ 모바일 애플리케이션 개발에 적용.

  • iOS와 Android 모두를 위한 앱을 만들 수 있는 크로스 플랫폼 프레임워크로, JS를 사용하여 모바일 앱을 개발.

  • 웹 개발에 사용되는 비슷한 구조와 패턴으로 모바일 앱을 구축, 실제 네이티브 앱처럼 보이고 작동.

    🔑 React와 React Native의 가장 큰 차이점 :
    React는 JavaScript 라이브러리, React Native는 프레임워크

⚒️ 2. React와 React-Native의 동작

🔨 React

Dom 생성 후 -> Virtual Dom 이용 => 변화된 곳을 캐치하여 변화된 Dom으로 변경

⛏️ React Native

코드를 실행 -> Bridge 이용 => ios, android 각각의 네이티브 언어 접근

⚒️ 3. React와 React Native 차이점

-ReactReact Native
1) UI 렌더링
(플랫폼)		웹 브라우저모바일 애플리케이션
(IOS, AOS)
2) 화면 출력
(DOM 조작)		ReactDom 사용
(필요 O)		AppRegistry 사용
(필요 X)
3) CSS 스타일링CSS, Sass 등Flexbox, Stylesheet
4) 컴포넌트HTML 태그네이티브 컴포넌트
5) 패키지 및 빌드/배포웹팩(Webpack) 등 도구 사용플랫폼에 대한 별도의 빌드 도구 사용
6) 라이브러리ReactDom, React Router 등React Native, Expo, React Navigation 등

🛠️ 1) UI 렌더링(플랫폼)

• React : 웹 브라우저 환경에서 HTML, CSS, JavaScript를 사용하여 동작합니다, 웹 애플리케이션 개발
• React Native : 모바일 환경에서 네이티브 컴포넌트를 사용하여 동작, iOS 및 Android 모바일 애플리케이션 개발

🛠️ 2) 화면 출력(DOM 조작)

• React : ReactDom 사용

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

• React Native : AppRegistry 사용

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';


AppRegistry.registerComponent(appName, () => App);

🛠️ 3) CSS 스타일링

• React : CSS 사용.
• React Native : StyleSheet 객체를 사용하여 스타일링, flexbox를 이용한 레이아웃 제작을 제공

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

class Card extends Component {
 render(){
      return (
        <View style={styles.Card}>
          <View style={styles.Card_title} />
          <View style={styles.Card_details} />
        </View>
    )}
}

const styles = StyleSheet.create({
  Card: {
    flex: 1,
  },
  Card_title: {
    flex: 0.5,
    backgroundColor: 'blue',
  },
  Card_details: {
    flex: 8,
    backgroundColor: 'green',
  }
})

export default Card;

🛠️ 4) 컴포넌트

• React : <div> , <h1> , <button> 등의 HTML 태그를 사용

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <h1>React</h1>
        Hello React!
      </div>
    );
  }
}

• React Native : <View> , <Text> , <Button> 등의 네이티브 컴포넌트를 사용

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

class HelloMessage extends React.Component {
  render() {
    return (
      <View>
        <Text>React-Native   Hello React-Native!</Text>
      </View>

🛠️ 5) 패키지 및 빌드/배포

  • React : 웹팩(WebPack) 등의 도구 사용
    웹서버에 배포 ➡️ 브라우저를 통해 접근
  • React Native : 각 플랫폼에 대한 별도의 빌드 도구를 사용
    ➡️ Xcode(아이폰) 및 Android Studio(안드로이드)와 같은 네이티브 개발 도구와 통합됩니다
    앱 스토어를 통해 배포 ➡️ 앱을 다운로드하여 사용

🛠️ 6) 라이브러리

  • React : React DOM React Router, Redux 등의 라이브러리 사용
  • React Native : React Native, Expo, React Navigation의 빌드 도구를 사용

🛬 마치며

이번에는 React와 React Native의 차이점을 알아보는 시간을 가졌다.
세세히 들어가면 더 많은 차이점들이 있겠지만, 그렇게까지 들어가지 않고 간단하게라도 알고 간다면 프런트엔드 개발하는데 많은 도움이 될 것 같다.
다음에 기회가 된다면 React Native로 앱 개발도 해봐야 겠다.
(공부할 내용이 끝이 없네...ㅎ)

🗝️ 참고 링크(Reference)

profile
토남토냥(박인성)
개발자가 되고 싶어...

0개의 댓글