Resact Native와 React의 차이점은 무엇인가?

Resact Native와 React의 차이점은 무엇인가?

이 문제의 답은 공동체의 노력이다.기존 답변을 편집하여 게시물을 개선하십시오.그것은 현재 새로운 해답이나 상호작용을 받아들이지 않고 있다.

나는 호기심에서 리액션을 배우기 시작했고, 구글을 사용하여 만족할 만한 답을 찾을 수는 없었지만 리액션과 리액션 네이티브의 차이점을 알고 싶었다.React and React Native는 동일한 형식을 가지고 있는 것 같다.그들은 완전히 다른 구문을 가지고 있는가?

ReactJS는 JavaScript 라이브러리로, 사용자 인터페이스와 웹 애플리케이션을 구축하기 위해 프런트 엔드 웹과 서버에서 모두 실행된다.재사용 가능한 구성요소의 개념을 따른다.

React Native는 호스트에서 사용할 수 있는 JavaScript 엔진을 사용하는 모바일 프레임워크로, React를 사용할 수 있는 JavaScript에서 다양한 플랫폼(iOS, Android, Windows Mobile)을 위한 모바일 애플리케이션을 구축할 수 있다.재사용 가능한 구성 요소를 구축하고 기본 구성 요소와 통신하기 위한 JS 추가 설명

둘 다 JavaScript의 JSX 구문 확장을 따른다.어느 정도까지가.React.createElement비밀리에 하는 전화심층 JSX

둘 다 페이스북이 제공하는 오픈소싱이다.

반응 프로젝트 입니다.

페이스북에서 그들은 가상 DOM 모델을 사용하여 JavaScript가 웹사이트 DOM을 더 빠르게 조작할 수 있도록 Reaction을 발명했다.

페이지의 일부만 새로 고침(읽기: 부분 새로 고침)하는 React virtual-dom 모델에 비해 DOM 전체 새로 고침 속도가 느리다.

이 영상을 보면 알겠지만, 페이스북은 부분적인 리프레시가 기존 리프레시보다 더 빠를 것이라는 것을 바로 이해했기 때문에 리액션을 발명하지 않았다.원래 그들은 페이스북 애플리케이션 재구축 시간을 줄일 수 있는 방법이 필요했고 운 좋게도 이것은 부분적인 DOM 갱신을 되살렸다.

토착적으로 반응하다는 react의 결과일 뿐이다.자바스크립트를 이용해 토종 앱을 구축하는 플랫폼이다.

react integrative native를 실행하기 전에 당신은 네이티브 앱을 만들기 위해 Android용 Java 또는 iPhone용 Objective-C를 알아야 했다.

React Native를 사용하면 JavaScript에서 네이티브 앱의 동작을 흉내 낼 수 있으며, 마지막에 출력물로 플랫폼별 코드를 얻을 수 있다.만약 당신이 당신의 애플리케이션을 더 최적화해야 한다면 당신은 JavaScript와 네이티브 코드를 섞을 수도 있다.

영상에서 올리비아 비숍이 말했듯이 리액트 네이티브 코드 베이스의 85%는 플랫폼 간 공유가 가능하다.이것들은 응용 프로그램이 일반적으로 사용하는 구성 요소와 공통 논리일 것이다.

코드의 15%는 플랫폼마다 다르다.플랫폼별 자바스크립트는 플랫폼의 풍미를 주는 것이다(그리고 경험의 차이를 만든다).

멋진 것은 이 플랫폼별 코드가 이미 작성되어 있다는 것이다. 따라서 당신은 그것을 사용하기만 하면 된다.

반응:

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리다.

기본 반응:

React Native를 사용하면 JavaScript만 사용하여 모바일 앱을 만들 수 있다.리액션과 동일한 디자인을 사용해 선언적 컴포넌트로부터 풍부한 모바일 UI를 구성할 수 있다.
React Native를 사용하면 "모바일 웹 앱", "HTML5 앱" 또는 "하이브리드 앱"을 만들지 않는다.목표-C나 자바를 이용해 만든 앱과 구별할 수 없는 진짜 모바일 앱을 만드는 겁니다.React Native는 일반 iOS 및 Android 앱과 동일한 기본 UI 구성 블록을 사용한다.JavaScript와 React를 사용하여 이 빌딩 블록들을 조합하십시오.
React Native를 사용하면 앱을 더 빨리 만들 수 있다.다시 컴파일하는 대신 앱을 즉시 다시 로드할 수 있다.핫 재로드 기능을 사용하면 애플리케이션 상태를 유지하면서 새 코드를 실행할 수도 있다.한번 해 봐. 마법 같은 경험이야.
Resact Native는 Objective-C, Java 또는 Swift로 작성된 구성요소와 원활하게 결합된다.애플리케이션의 몇 가지 측면을 최적화해야 하는 경우 네이티브 코드로 간단하게 드롭다운할 수 있다.또한 React Native(원본 리액션)에서 앱의 일부를 만들기도 쉽고, 기본 코드를 사용하여 앱의 일부를 직접 만들 수도 있다. 이것이 Facebook 앱의 작동 방식이다.

따라서 기본적으로 리액션은 웹 앱을 보기 위한 UI 라이브러리인데, 자바스크립트와 JSX를 사용하고, 리액션 네이티브는 리액션 위에 있는 추가 라이브러리로서, 리액션의 기본 앱을 만든다.iOS그리고Android장치들

반응 코드 샘플:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

기본 코드 샘플 반응:

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

반응에 대한 자세한 내용은 Facebook 팀이 만든 공식 웹 사이트를 참조하십시오.

https://facebook.github.io/react

기본 반응에 대한 자세한 내용은 아래의 기본 웹 사이트 반응을 참조하십시오.

https://facebook.github.io/react-native

첫째, 공통점은 다음과 같다.RN(Ract & React Native)은 모두 유연한 사용자 인터페이스를 만들도록 설계되었다.이러한 프레임워크에는 많은 이점이 있지만, 가장 근본적인 접근방식은 UI 개발을 위해 만들어졌다는 것이다.페이스북은 리액션 이후 몇 년 후에 RN을 개발했다.

반응: Facebook은 이 프레임워크를 HTML/XML 내부에 JavaScript를 쓰는 것과 거의 비슷하도록 설계했으며, 그 때문에 태그는 "JSX"(JavaScript XML)라고 불리며 다음과 같은 친숙한 HTML 유사 태그와 유사하다.<div>또는<p>. React의 표시는 다음과 같은 사용자 정의 구성요소를 나타내는 대문자 태그 입니다.<MyFancyNavbar />, 또한 RN에 존재한다.그러나 React는 DOM을 사용한다.HTML을 위해 DOM이 존재하므로, React는 웹 개발에 사용된다.

Resact Native: RN은 HTML을 사용하지 않기 때문에 웹 개발에 사용되지 않는다.그것은...에 쓰인다.사실상 다른 모든 것!모바일 개발(iOS & Android 둘 다), 스마트 기기(시계, TV, 증강현실 등)RN은 상호작용할 DOM이 없기 때문에 리액션에서 사용되는 것과 같은 종류의 HTML 태그를 사용하는 대신 다른 언어로 컴파일되는 자체 태그를 사용한다.예를 들어, 대신<div>태그, RN 개발자는 RN의 기본 제공 기능 사용<View>태그(예: 후드 아래에 있는 다른 네이티브 코드로 컴파일됨)android.view Androidero에서.UIViewiOS로).

요컨대, 그것들은 (UI 개발을 위해) 매우 유사하지만 다른 매체에서 사용된다.

ReactJS는 UI 구성요소의 계층 구조 구축을 위한 프레임워크다.각 구성 요소에는 상태와 소품이 있다.데이터는 소품을 통해 최상위 구성 요소에서 하위 구성 요소로 흐른다.상태는 이벤트 핸들러를 사용하여 최상위 구성 요소에서 업데이트된다.

리액션 네이티브 사용 모바일 앱용 컴포넌트 구축을 위한 리액션 프레임워크.리액트 네이티브는 iOS와 Android 플랫폼 모두에 기본 구성 요소 세트를 제공한다.Resact Native(원본 반응)의 구성 요소로는 Navigator(탐색기), TabBar(탐색기), TextInput(텍스트 입력), View(보기), ScrollView(스크롤 보기)가 있다.기본 iOS UIKit와 안드로이드 UI 구성요소를 내부적으로 사용한다.Resact native는 또한 NativeModules가 iOS의 경우 ObjectC로 작성된 코드를 JavaScript 내에서 사용할 수 있도록 허용한다.

1. React-Native는 Javascript 코드의 80%~90%를 공유하는 Android & iOS 애플리케이션 개발을 위한 프레임워크다.

React.js는 웹 응용 프로그램 개발을 위한 부모 Javascript 라이브러리인 반면.

2. 다음과 같은 태그를 사용하는 동안<View><Text>는 Reaction-Native 에서 React.js와 같은 웹를 매우 <div> <h1> <h2>웹/모바일 개발 사전의 동의어일 뿐이다.

3. React.js의 경우 html 태그의 경로 렌더링을 위한 DOM이 필요한 반면 모바일 애플리케이션의 경우:React-Native는 AppRegistry를 사용하여 앱을 등록한다.

이것이 React.js와 React-Native의 빠른 차이/비슷함에 대한 쉬운 설명이었으면 한다.

우리는 그것들을 정확히 비교할 수 없다.사용 사례에 차이가 있다.

(2018 업데이트)

---

리액션JS

React는 주요 초점인 Web Development를 가지고 있다.

1. • 가상 DOM은 페이지의 일부만 새로 고치기 때문에 리액션의 가상 DOM은 기존의 전체 새로 고침 모델보다 빠르다.
2. • 반응에서 코드 구성요소를 재사용하여 많은 시간을 절약할 수 있다.(Ract Native도 사용 가능)
3. • 비즈니스 부문:서버에서 브라우저로 페이지를 완전히 렌더링하면 웹 앱의 SEO가 향상된다.
4. • 디버깅 속도를 향상시켜 개발자의 삶을 더 쉽게 만들어 준다.
5. • 코르도바나 아이오닉과 같은 하이브리드 모바일 앱 개발로 리액션으로 모바일 앱을 만들 수 있지만, 여러 점에서 리액트 네이티브로 보다 효율적으로 모바일 앱을 만들고 있다.

---

네이티브 리액션

Mobile Development에 적합한 React의 확장.

1. • 주요 초점은 모바일 사용자 인터페이스에 관한 것이다.
2. • iOS & Android가 커버된다.
3. • 재사용 가능한 기본 UI 구성 요소 및 모듈을 통해 하이브리드 앱이 기본적으로 렌더링할 수 있다.
4. • 예전 앱을 다시 검사할 필요 없어.다시 쓸 필요 없이 기존 앱 코드에 기본 UI 구성 요소 리액션만 추가하면 된다.
5. • HTML을 사용하여 앱을 렌더링하지 않음.유사한 방식으로 작동하는 대체 구성요소를 제공하므로 이해하기 어렵지 않다.
6. • 코드가 HTML 페이지에서 렌더링되지 않기 때문에 이전에 HTML, SVG 또는 캔버스를 렌더링하는 리액션으로 사용한 라이브러리를 재사용할 수 없다는 의미도 된다.
7. • Resact Native는 웹 요소에서 만들어지지 않으며 동일한 방식으로 스타일링할 수 없다.CSS 애니메이션 안녕!

---

내가 도와 줬으면 좋겠는데 :)

이미 많은 해답이 있다는 것을 알지만 이 모든 것을 읽고 난 후 나는 아무도 이 두 가지 사이의 구조적 차이점이 무엇이고 이 두 가지가 어떻게 작용하는지 설명하지 못한다고 느꼈기 때문에 나는 아직 설명할 여지가 있다고 믿는다.

반응하다

반응 = 바닐라 JS + ES6 + HTML + CSS = JSX = 웹 앱(프론트 엔드)

리액션-네이티브도 리액션에 기반하고 있으며, 같은 개념의 JS가 그곳에서 사용되고 있기 때문에 리액션에 대해 먼저 이야기해보자.

React는 아름답고 유연한 한 페이지 웹 애플리케이션을 만드는 데 사용되는 JS 라이브러리로서, 이제 한 페이지 웹 앱이 무엇인지에 대한 질문이 여러분의 마음에 떠오를 것이다.

단일 페이지 응용 프로그램

한 페이지 애플리케이션은 브라우저 내에서 작동하며 사용 중 페이지를 다시 로드할 필요가 없는 앱이다.당신은 이런 종류의 어플리케이션을 매일 사용하고 있다.예를 들어, Gmail, Google Maps, Facebook 또는 GitHub.SPA는 브라우저에서 "자연적인" 환경을 모방하여 뛰어난 UX를 서비스하는 것으로 페이지 재로드나 추가 대기 시간이 없다.그것은 단지 당신이 방문한 웹 페이지일 뿐인데, JavaScript를 사용하여 다른 모든 컨텐츠를 로딩하는데, 이 웹 페이지들은 그들이 많이 의존하고 있다.SPA는 마크업과 데이터를 독립적으로 요청하고 브라우저에서 페이지를 바로 렌더링한다.우리는 EquiliJS, Ember.js, Metal.js, Kockout.js, React.js, Vue.js와 같은 고급 자바스크립트 프레임워크 덕분에 이것을 할 수 있다.한 페이지 사이트는 사용자에게 내용이 간단하고 쉽고 실행 가능한 방식으로 제시되는 편안한 하나의 웹 공간에 사용자를 유지하도록 돕는다.

작동 방식

이제 SPA가 무엇인지 아시겠지만, 웹 앱이기 때문에 브라우저로 실행하기 위해 HTML 요소를 사용할 것이고, 또한 이러한 요소와 관련된 모든 기능을 처리하기 위해 JS를 사용할 것이다.가상 DOM을 사용하여 구성요소의 새로운 변경사항을 렌더링했다.

반응-네이티브

이제 반응에 대한 생각이 좀 생겼으니 반응에 대해 이야기해 봅시다.

React-Native = React (Vanilla JS + ES6 + JS와 Native 코드 사이의 브리지) + Native(iOS, Android) = Mobile Apps(Android, iOS, 또한 웹을 지원하지만 일부 제한이 있음)

React-Native는 React를 사용하여 아름다운 크로스 플랫폼 모바일 앱(Android, iOS)을 만드는 데 사용된다.

작동 방식

React-Native에는 두 개의 스레드가 있다.

1. JS 스레드

2. 네이티브 스레드

모든 리액션 코드는 JS 스레드 내에서 실행되며 최종 값은 네이티브 스레드로 전달되며, 이 스레드는 최종 값이 있는 화면에 레이아웃을 그린다.

JS 스레드는 모든 계산을 수행하고 데이터를 네이티브, 방법?

React는 비동기 브리지를 사용하여 JSON 형식의 Native 스레드에 데이터를 전달하며 React-Native라고 한다.

그래서 우리는 반응형에서 현재적 관점을 만들기 위해 네이티브 컴포넌트를 사용하고, 이 두 세계 사이에서 의사소통을 하기 위해 브리지(Bridge)를 사용한다.

JS 스레드는 JavaScript를 실행할 수 있을 만큼 빠르며 네이티브 스레드는 네이티브 코드를 실행할 수 있을 만큼 빠르지만 React가 비동기 브리지로 이 두 세계 간의 통신을 수행함에 따라 이 브리지의 과부하가 성능 문제를 야기한다.

업데이트: Reaction-Native는 현재 re-architecuter 단계를 거치고 있으며 페이스북 팀은 JS와 네이티브 간에 동시에 통신하기 위해 비동기 브리지를 제거하려고 노력하고 있다. 이 re-architecter의 주요 부분은 JSI(Javascript 인터페이스)와 fabircle이다.

JSI: JSI는 Native(Java/ObjC)와 Javascript 코드 사이의 브리지 필요성을 제거한다.또한 두 세계 간의 통신을 위해 모든 정보를 JSON으로 직렬화/비직화해야 하는 요건도 제거한다.JSI는 자바스크립트와 토착세계를 폐쇄함으로써 새로운 가능성에 대한 문을 열고 있다.

다음은 JSI가 제공하는 주요 사항이다.

1. Javascript 런타임에 메소드를 등록할 수 있는 Javascript 인터페이스.이러한 방법은 Javascript 세계의 글로벌 오브젝트를 통해 이용할 수 있다.

2. 이 방법은 전적으로 C++로 작성하거나 안드로이드의 iOS와 자바 코드의 목표 C 코드와 통신하는 방법이 될 수 있다.

3. Javascript와 원주민 세계 사이의 통신에 전통적 다리를 사용하고 있는 모든 네이티브 모듈은 C++에 간단한 레이어를 적음으로써 JSI 모듈로 변환될 수 있다. iOS에서 이 레이어를 쓰는 것은 C++가 목표 C에서 직접 실행될 수 있기 때문에 모든 iOS 프레임워크와 코드를 직접 사용할 수 있기 때문에 간단하다.

4. 그러나 안드로이드에서는 JNI를 통해 이것을 하기 위해서는 1마일을 더 가야 한다.

5. 이러한 방법은 완전히 동기화할 수 있으며, 이는 비동기/와이트 사용이 필수적이지 않다는 것을 의미한다.

패브릭: Fabircle은 문서에 따라 동기화된 기본 UI 구성요소와 통신할 수 있는 새로운 UI 계층이다.

패브릭은 레거시 렌더링 시스템의 개념적 진화인 리액션 네이티브의 새로운 렌더링 시스템이다.핵심 원칙은 C++에서 렌더 로직을 더 많이 통합하고, 호스트 플랫폼과의 상호운용성을 향상시키며, React Native에 대한 새로운 기능을 잠금 해제하는 것이다.2018년부터 개발이 시작돼 2021년 페이스북 앱에서 리액트 네이티브(React Native)가 새로운 렌더러가 지원한다.

이 두 프레임워크의 공통점과 차이점에 대해 이야기해 봅시다.

특징	반응하다	반응-네이티브
플랫폼	웹	Android, IOS, 웹
오픈 소스	네	네
사용자 인터페이스	HTML + CSS	기본 구성 요소(iOS, Android, 웹)
건축	가상 DOM	Virtual DOM + Bridge + 기본 구현
애니메이션	CSS 애니메이션	네이티브 애니메이션
스타일링	CSS	JS 스타일시트
개발자	페이스북	페이스북

간단한 의미에서, React and React integrated는 사용자 인터페이스 설계의 경우를 제외하고 동일한 설계 원칙을 따른다.

1. 리액트 네이티브에는 모바일용 사용자 인터페이스를 정의하기 위한 별도의 태그 세트가 있지만, 둘 다 구성요소를 정의하기 위해 JSX를 사용한다.
2. 두 시스템 모두 재사용 가능한 UI 구성요소를 개발하고 그 구성을 통해 개발 노력을 줄이는 것이 주된 목적이다.
3. 만약 당신이 코드를 제대로 계획하고 구조화한다면 당신은 모바일과 웹에 동일한 비즈니스 로직을 사용할 수 있다.

어쨌든, 그것은 모바일과 웹을 위한 사용자 인터페이스를 만들기에 좋은 도서관이다.

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리다.구성 요소가 렌더링할 항목 리액션이라고 말하면 데이터가 변경될 때 적절한 구성 요소를 효율적으로 업데이트하고 렌더링할 수 있다.여기서 쇼핑리스트는 리액션 컴포넌트 클래스 또는 리액션 컴포넌트 유형이다.

React Native 앱은 실제 모바일 앱이다.React Native를 사용하면 "모바일 웹 앱", "HTML5 앱" 또는 "하이브리드 앱"을 만들지 않는다.목표-C나 자바를 이용해 만든 앱과 구별할 수 없는 진짜 모바일 앱을 만드는 겁니다.React Native는 일반 iOS 및 Android 앱과 동일한 기본 UI 구성 블록을 사용한다.

추가 정보

ReactJS는 핵심 프레임워크로서, 반응 패턴을 기반으로 격리된 구성 요소를 구축하기 위한 것으로, MVC에서 V로 생각할 수 있다. 하지만 반응하는 것이 다른 느낌을 가져온다고 말하고 싶다. 특히 반응하는 개념에 익숙하지 않다면 말이다.

ReactNative는 안드로이드와 iOS 플랫폼용 세트 컴포넌트를 공통으로 갖는 또 다른 계층이다.그래서 그 코드는 기본적으로 리액션JS이기 때문에 리액션JS와 같아 보이지만, 기본적으로 모바일 플랫폼에서 로딩된다.OS에 따라 보다 복잡하고 플랫폼 상대적인 API를 Java/Objective-C/Swift와 브리지하여 React 내에서 사용할 수도 있다.

Resact Native는 주로 JavaScript에서 개발되며, 이는 시작하기 위해 필요한 대부분의 코드가 플랫폼 간에 공유될 수 있다는 것을 의미한다.기본 반응: 기본 구성요소를 사용하여 렌더링한다.React Native 앱은 목표 플랫폼인 Objective-C 또는 Swift for iOS, Java for Android 등이 요구하는 언어로 개발된다.쓰여진 코드는 플랫폼 간에 공유되지 않고 그들의 행동은 다양하다.그들은 플랫폼이 제공하는 모든 기능에 아무런 제한 없이 직접 접근할 수 있다.

리액션은 페이스북이 사용자 인터페이스 구축을 위해 개발한 오픈소스 자바스크립트 라이브러리다.웹과 모바일 앱의 뷰 레이어를 처리하는 데 사용된다.재사용 가능한 UI 구성 요소를 만드는 데 사용되는 ReactJS.현재 it 분야에서 가장 인기 있는 자바스크립트 도서관 중 하나이며, 그 배후에는 강력한 기반과 큰 커뮤니티가 있다.ReactJS를 배우면 자바스크립트, HTML5, CSS에 대한 지식이 있어야 한다.

React Native와 React DOM의 기본 추상화인 React Native로 작업하려면 React Native...도 함께 작업해야 한다.웹과 동일하지만 Ract Native 대신 Ract DOM이 필요할 것이다.

React는 기본 추상화이므로 일반적인 구문과 워크플로우는 동일하지만 사용하는 구성요소는 매우 다르기 때문에 이러한 차이점을 인라인으로 학습해야 할 필요가 있으며, 이는 "Reacting so where write"라는 모토와 인라인으로 이루어져야 한다. 왜냐하면 React(기본 추상화)를 알면 단순히 차이점을 배울 수 있기 때문이다.다른 프로그래밍 언어, 구문 및 워크플로우를 배우지 않는 플랫폼.

React-Native는 Reaction이 있는 프레임워크다.JS는 당신이 당신의 웹사이트에 사용할 수 있는 자바스크립트 라이브러리 입니다.

react-native는 기본 핵심 요소(이미지, 텍스트)를 제공하며, 여기서 react는 여러 구성 요소를 제공하고 함께 작동하도록 한다.

React Native는 모바일 애플리케이션용이고 React는 웹 사이트(프론트 엔드)용입니다.둘 다 페이스북에 의해 발명된 프레임워크다.React Native는 IOS와 Android 모두에 대해 거의 동일한 코드를 쓸 수 있다는 것을 의미하는 프레임워크를 개발하는 크로스 플랫폼이다.나는 개인적으로 리액트 네이티브에 대해 더 많이 알고 있으니 이쯤에서 두고 볼게.

React Js는 React 를 사용하여 더 빠른 웹 응용프로그램을 개발하고 실행할 수 있는 Javascript Library 입니다.

React Native를 사용하면 JavaScript만 사용하여 모바일 앱을 만들 수 있으며, 모바일 애플리케이션 개발에 사용된다. 자세한 내용은 https://facebook.github.io/react-native/docs/getting-started.html를 참조하십시오.

구성 요소 라이프사이클과 다른 모든 벨과 휘파람에 관해서는 대부분 동일하다.

차이점은 주로 사용된 JSX 마크업이다.react는 html과 비슷한 것을 사용한다.다른 하나는 뷰를 표시하기 위해 반응에 의해 사용되는 마크업이다.

React Js는 HTML Dom으로 조작하고 있다.그러나 리액트 네이티브는 모바일(iOS/android) 네이티브 ui 컴포넌트로 조작하고 있다.

ReactJS는 웹 인터페이스를 구축하는 데 사용되는 자바스크립트 라이브러리다.당신은 웹팩과 같은 번들러가 필요할 것이고 당신의 웹사이트를 만드는 데 필요한 모듈을 설치하려고 할 것이다.

리액트 네이티브는 자바스크립트 프레임워크로, 멀티플랫폼 앱(iOS나 안드로이드 등) 작성에 필요한 모든 것이 함께 제공된다.앱을 만들고 배포하려면 xcode와 Android 스튜디오가 설치되어 있어야 한다.

리액션-네이티브는 리액션JS와 달리 HTML이 아니라 ios와 안드로이드로 앱을 만드는 데 사용할 수 있는 유사한 구성 요소를 사용한다.이 부품들은 ios와 안드로이드 앱을 만들기 위해 진짜 네이티브 컴포넌트를 사용한다.이 React-Native 앱은 다른 하이브리드 개발 플랫폼과 달리 실제와 같은 느낌을 준다.구성요소는 또한 iOS와 안드로이드에서 동일한 사용자 인터페이스를 다시 만들 필요가 없으므로 코드의 재사용 가능성을 높인다.

간단한 용어로 반응JS는 호스트 환경(브라우저, 모바일, 서버, 데스크톱 등)에 따라 렌더링할 항목을 반환하는 상위 라이브러리다.렌더링 외에도 라이프사이클 훅과 같은 다른 방법을 제공한다.등

브라우저에서 DOM 요소를 렌더링하기 위해 다른 라이브러리 react-dom을 사용한다.모바일에서는 React-Native 컴포넌트를 사용하여 플랫폼별(Both IOS, Android) 기본 UI 컴포넌트를 렌더링한다.그렇게

react + react-dom = 웹 개발

반응 + 반응-반응-반응 = 모바일 발전

당에 조금 늦었지만, 여기 좀 더 포괄적인 예를 들어 답해 보자.

반응하다

리액션은 "그림자 DOM"을 사용하여 모든 변경에 대해 전체 DOM 트리를 재구성하는 대신 변경된 내용으로 DOM을 효율적으로 업데이트하는 구성요소 기반 UI 라이브러리다.처음에는 웹앱을 위해 만들어졌지만 이제는 모바일 & 3D/vr에도 사용할 수 있게 됐다.

네이티브 모바일 UI 요소에 네이티브 맵 리액션(React Native maps)을 사용하기 때문에 네이티브와 리액션(React Native) 사이의 컴포넌트는 상호 교환할 수 없지만 비즈니스 로직과 비렌더 관련 코드는 재사용할 수 있다.

리액션DOM

처음에 리액션 라이브러리에 포함되었지만 리액션이 웹이 아닌 다른 플랫폼에 사용되면서 분리되었다.DOM의 진입점 역할을 하며 리액션과 결합하여 사용된다.

예:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

네이티브 리액션

React Native는 Javascript와 Javascript가 "브리지"를 통해 본래의 상대방과 반응하고 통신하는 크로스 플랫폼 모바일 프레임워크다.이 때문에, React Native를 사용할 때 많은 UI 구조는 달라져야 한다.예를 들어, 목록을 작성할 때 사용하려고 하면 주요 성능 문제가 발생할 수 있음mapRact Native의 Majuelda 한다.FlatListTV뿐만 아니라 IOS/하는 데 될 수 Ract Native는 스마트워치와 TV뿐만 아니라 IOS/Android 모바일 앱을 구축하는 데 사용될 수 있다.

엑스포

엑스포는 새로운 리액트 네이티브 앱을 시작할 때 가는 것이다.

엑스포는 유니버설 리액션 어플리케이션을 위한 틀이자 플랫폼이다.React Native 및 Native 플랫폼을 기반으로 구축된 툴과 서비스 세트로 iOS, Android 및 웹 앱에서 빠르게 반복, 구축 및 반복할 수 있다.

참고: 엑스포 이용 시 그들이 제공하는 네이티브 API만 이용할 수 있다.당신이 포함한 모든 추가 도서관은 순수한 자바스크립트여야 할 것이다. 그렇지 않으면 당신은 엑스포에서 나와야 할 것이다.

기본 반응 사용 예제:

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

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

차이점:

• 렌더 외부의 모든 것이 동일하게 유지될 수 있다는 점에 유의하십시오. 이것이 비즈니스 로직/라이프사이클 로직 코드를 Ract and React Native에서 다시 사용할 수 있는 이유다.
• Resact Native(원본 반응)에서 모든 구성 요소를 react-native(원본 반응) 또는 다른 UI 라이브러리에서 가져와야 함
• 네이티브 컴포넌트에 매핑되는 특정 API를 사용하는 것은 일반적으로 자바스크립트 쪽의 모든 것을 처리하려고 하는 것보다 더 효과적일 것이다.ex. 목록을 작성하기 위한 구성 요소 매핑 대 플랫 목록 사용
• 미묘한 차이: 다음과 같은 것onClick로 바뀌다.onPress, React Native는 스타일시트를 사용하여 스타일을 보다 성능적으로 정의하고 React Native는 flexbox를 기본 레이아웃 구조로 사용하여 사물의 반응을 유지한다.
• Ract Native에는 전통적인 "DOM"이 없으므로 Ract Native와 Ract Native에 걸쳐 순수한 자바스크립트 라이브러리만 사용할 수 있다.

반응로360번길

리액션은 3D/VR 애플리케이션 개발에도 활용될 수 있다는 점도 언급할 만하다.구성 요소 구조는 Resact Native와 매우 유사하다.https://facebook.github.io/react-360/

리액션JS

• React는 웹사이트, 웹 앱, SPA 등을 만드는 데 사용된다.

• React는 UI 계층 구조를 만드는 데 사용되는 Javascript 라이브러리다.

• UI 컴포넌트 렌더링을 담당하며, MVC 프레임워크의 V 파트로 간주한다.

• React의 가상 DOM은 가상 DOM이 페이지의 일부만 새로 고침하므로 페이지 새로 고침 시간이 단축되므로 기존 전체 새로 고침 모델보다 속도가 빠르다.

• React는 UI의 기본 단위로 구성요소를 사용하며 이를 재사용할 수 있어 코딩 시간을 절약할 수 있다.간단하고 배우기 쉽다.

  네이티브 리액션

• React Native는 교차 플랫폼 Native 앱을 만드는 데 사용되는 프레임워크다.그것은 당신이 네이티브 앱을 만들 수 있고 안드로이드와 ios에서도 동일한 앱이 실행된다는 것을 의미한다.

• react native는 react의 모든 장점을 가지고 있다.JS

• 리액트 네이티브는 개발자가 웹 스타일의 접근 방식으로 네이티브 앱을 만들 수 있도록 한다.

직장는 페이스북처럼 크고 작은 인터페이스 웹 애플리케이션을 구축하는 Javascript 라이브러리다.

직장 노렌트는 안드로이드, IOS, 윈도 폰에서 네이티브 모바일 애플리케이션을 개발하는 Javascript 프레임워크다.

둘 다 페이스북이 제공하는 오픈 소스다.

여기 아주 좋은 설명이 있다.

Reactjs는 프런트엔드와 서버를 모두 지원하는 자바스크립트 라이브러리다.게다가, 그것은 모바일 앱과 웹사이트를 위한 사용자 인터페이스를 만드는 데 사용될 수 있다.

리액트 네이티브는 앱과 웹사이트 구축에 리액션을 사용하는 크로스 플랫폼 모바일 프레임워크다.네이티브 컴파일을 네이티브 앱 컴파일에 대응하면 프로그래머는 자바스크립트에서 윈도, 안드로이드, iOS와 같은 다른 플랫폼에서 실행할 수 있는 모바일 애플리케이션을 구축할 수 있다.

• Reactjs는 웹 플랫폼에 대한 React DOM의 기본 파생상품으로 설명될 수 있는 반면 React Native는 그 자체로 기본 파생상품으로, 구문과 워크플로우는 그대로 유지되지만 구성요소는 변경된다.

• Reactjs는 결국 JavaScript 라이브러리로서 프로그래머가 몰입적이고 성능이 뛰어난 UI Layer를 만들 수 있는 반면 React Native는 웹이든 iOS든 Android든 크로스 플랫폼 앱을 구축하는 전체 프레임워크다.

• 리액트js에서는 가상 DOM이 리액트js에서 브라우저 코드를 렌더링하는 데 사용되고, 리액트 네이티브에서는 네이티브 API가 모바일에서 컴포넌트를 렌더링하는 데 사용된다.

• 리액트js로 개발된 앱은 UI에서 HTML을 렌더링하고 리액트 네이티브는 JSX를 사용해 UI 렌더링을 하는데 이는 javascript에 불과하다.

• CSS는 Reactjs에서 스타일링을 생성하기 위해, 스타일시트는 React Native에서 스타일링을 위해 사용된다.

• 리액트js에서는 웹 개발처럼 CSS를 이용하여 애니메이션을, 리액트 네이티브에서는 리액트 네이티브 어플리케이션의 다른 컴포넌트에 걸쳐 애니메이션을 유도하는 애니메이션 API를 사용한다.

• 웹 인터페이스에 대해 고성능, 동적, 응답성이 높은 UI를 구축해야 하는 경우 Reactjs가 가장 좋은 옵션이고 모바일 앱에 진정한 네이티브 느낌을 부여해야 하는 경우 React Native가 가장 좋은 옵션이다.

자세한 내용은 https://www.simform.com/reactjs-vs-reactnative/를 참조하십시오.

내가 알고 있는 차이점은 다음과 같다.

1. 그들은 다른 html 태그를 가지고 있다:Resact Native(원본 반응)는 React(반응) 대신 텍스트를 처리하는 데 사용됨.
2. React Native는 일반 버튼 요소 대신 터치 가능한 구성 요소를 사용하고 있다.
3. Resact Native에는 렌더링 목록을 위한 ScrollView 및 FlatList 구성 요소가 있다.
4. React Native는 AsyncStorage를 사용하는 반면 React Native는 로컬 스토리지를 사용하는 경우
5. React Native 라우터는 스택으로 기능하지만 React에서는 항법 매핑을 위해 Route 구성요소를 사용한다.

요약: Ract.js for Web Development for Mobile App Development react-Native

React Js - React JS는 프런트 엔드 자바스크립트 라이브러리로서 프레임워크가 아닌 대형 라이브러리임

• 그것은 건축에 도움이 되는 구성요소 기반 접근방식을 따른다.
  재사용 가능한 UI 구성 요소
  • 복잡하고 인터랙티브한 웹 및 모바일 UI 개발에 사용된다.
  • 2015년에야 오픈소싱이 이뤄졌음에도 이를 지원하는 최대 커뮤니티 중 하나가 있다.

ReactNative - React Native는 오픈 소스 모바일 애플리케이션 프레임워크다.

일부 차이는 다음과 같다.
1- React-Native는 모바일 앱을 만들 때 사용하던 프레임워크로, 여기서 ReactionJS는 당신이 당신의 웹사이트에 사용할 수 있는 자바스크립트 라이브러리 입니다.
2- React-Native는 React가 사용하는 동안 HTML을 사용하여 앱을 렌더링하지 않는다.
3- 웹사이트와 모바일의 경우 리액션 사용 시 모바일 앱만 개발하는 데 사용되는 리액션 네이티브.

간단한 비교는 다음과 같아야 한다.

리액트Js

return(
    <div>
      <p>Hello World</p>
    </div>
)

네이티브 리액션

return(
    <View>
      <Text>Hello World</Text>
    </View>
)

대응 네이티브에는 다음과 같은 HTML 요소가 없음divph1그 대신 모바일에 이치에 맞는 부품을 가지고 있다.
자세한 내용은 https://reactnative.dev/docs/components-and-apis.

Resact Native It(홈페이지)는 안드로이드와 iOS 모두에서 기본으로 실행할 수 있는 모바일 애플리케이션 개발을 위한 자바스크립트 프레임워크다.웹 사용자 인터페이스(UI) 개발을 위한 선언적 컴포넌트 기반 프레임워크인 페이스북에서 개발된 리액션JS를 기반으로 한다.구문

return(
    <View>
      <Text>Hello World</Text>
    </View>
)

Reaction 웹 개발을 위한 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리 입니다.또한 재사용 가능한 UI 구성요소를 만들 수 있다.React JS에서 코드 구성요소를 재사용할 수 있어 많은 시간을 절약할 수 있다.

구문

return(
    <div>
      <p>Hello World</p>
    </div>
)

참조URL: https://stackoverflow.com/questions/34641582/what-is-the-difference-between-react-native-and-react