React와 React Native의 이해

우리 인간은 많은 것을 혼동할 것입니다. 사물의 다른 특성에 따라 혼동이 발생할 수 있습니다. 다른 것과 혼동되는 가장 일반적인 방법은 이름입니다.

사람들은 먼저 새로운 것의 이름을 알게 됩니다. 다른 사람이든, 동물이든, 제품이든, 소프트웨어이든.. 그들은 자신의 이름으로 검색하고 다른 기능, 응용 프로그램, 역사 등에 대해 알게 될 것입니다.,

왜 이게 다야?

예, 사람들은 종종 용어(이름) React 및 React Native 와 혼동됩니다. 기술 전문가가 아닌 사람이 React 및 React Native 라는 이름을 보면 대부분의 경우 Reactive Native를 React의 확장으로 간주합니다. 일부 기술자라도 이 분야에 대한 지식이 0%라면 같은 방식으로 생각할 수 있습니다.

과연 그것들은 무엇일까요? 왜 사람들은 종종 다른 사람들이 아닌 그들과 혼동합니까?

React와 React Native는 두 가지 프레임워크입니다. 이름 사이에 추가 단어가 있으면 이름이 비슷해 보입니다. 그래서 사람들은 언뜻 보기에 이름 때문에 혼동을 하는 경우가 많습니다. 같은 혼란을 겪고 있다면 그 뒤에 숨겨진 미스터리를 풀 수 있는 올바른 위치에 있습니다.

알아 보자.

반응

React는 단일 페이지 웹 애플리케이션을 빌드하는 데 사용되는 JavaScript 라이브러리입니다. 웹용 사용자 인터페이스(프론트엔드)를 구축하는 데 가장 널리 사용되는 라이브러리 중 하나입니다. 현재 가장 인기 있는 도서관이라고 할 수 있습니다. Facebook에서 만들고 유지 관리합니다. ReactJS라고도 합니다.

React에 대한 경험이 있으므로 배우고 구축하는 것이 아름답고 간단하다고 말할 수 있습니다. 도서관이야. 따라서 기능을 활용하여 우리가 원하는 대로 무엇이든 만들 수 있습니다. React로 애플리케이션을 개발할 때 따라야 할 엄격한 규칙은 없습니다. 그러므로 우리는 자유를 누리게 될 것입니다.

React에는 멋진 기능이 많이 있습니다. 그들을 살펴보자.

#1. 구성품

React에서 모든 것은 컴포넌트입니다. 웹 애플리케이션의 빌딩 블록과 같습니다. 우리는 작은 구성 요소를 결합하여 큰 구성 요소를 형성할 수 있습니다. 모든 구성 요소에는 고유한 상태와 컨트롤이 있습니다. 구성 요소는 사용자 인터페이스를 제어하고 상태에 따라 사용자에게 무엇을 표시할지 결정합니다.

컴포넌트는 React의 모든 것입니다. 그리고 그들은 재사용할 수 있습니다. 한 번 쓰고 여기저기 사용하세요.

우리는 최대한 주의해서 구성 요소를 작성해야 합니다. 애플리케이션이 커질 때 유지 관리가 쉬워집니다. 하나의 구성 요소에 많은 코드를 작성하면 결국 유지 관리에 부담이 됩니다. React 컴포넌트는 작고 달콤해야 합니다. 그들은 개발자의 삶을 천국과 지옥으로 만듭니다.

#2. 가상 DOM

버튼 안에 로더 같은 것을 보았어야 합니다. 그리고 소셜 미디어 플랫폼에서 좋아요 수는 누르는 즉시 증가합니다. 웹의 초창기에는 정보를 얻기 위해 모든 것을 다시 로드해야 했습니다. 그러나 이제 업데이트해야 하는 싱글은 다른 것을 건드리지 않고 새로 고침됩니다. 이게 다 뭐야?

이전에 보았듯이 React의 모든 것은 컴포넌트입니다. 브라우저는 웹 애플리케이션의 요소에 대한 DOM 구조를 유지 관리합니다. 웹 애플리케이션의 일부를 업데이트해야 하는 경우 DOM 조작을 사용하여 업데이트해야 합니다. React는 동일한 작업을 효율적으로 수행합니다.

React는 모든 구성 요소에 대한 가상 DOM(DOM 사본)을 만듭니다. 웹 애플리케이션에서 무언가를 업데이트하기 위해 React는 실제 DOM과 가상 DOM을 비교합니다. 변경 사항이 있으면 React가 구성 요소 업데이트를 트리거합니다.

#삼. 편도 데이터 흐름

데이터 흐름 없이는 큰 구성 요소 집합을 더 작은 구성 요소로 나눌 수 없습니다. 구성 요소 간의 데이터 흐름을 위한 방법이 있어야 합니다.

React를 사용하면 한 구성 요소에서 다른 구성 요소로 한 방향으로 데이터를 전달할 수 있습니다. 데이터는 상위 구성 요소에서 하위 구성 요소로 흐릅니다. 그리고 자식 구성 요소는 데이터를 업데이트할 수 없습니다. 데이터 흐름이 단방향이므로 데이터를 상위 구성 요소로 다시 보낼 수 있는 방법이 없습니다.

처음에는 다방향 데이터 흐름이 아니라고 생각할 수 있습니다. 그러나 단일 방향 데이터 흐름은 다방향 데이터 흐름에 대한 더 많은 제어를 제공합니다.

개요

JSX, 조건부 렌더링 등과 같은 다른 많은 기능이 있습니다. 그들은 이차적입니다. React 라이브러리의 주요 기능을 살펴보았습니다. React 애플리케이션의 경우 거의 모든 유형의 웹 애플리케이션을 만들 수 있습니다. React 커뮤니티는 거대합니다. React로 작업할 수 있는 많은 패키지를 찾을 수 있습니다.

네이티브 반응

React Native는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용되는 JavaScript 프레임워크입니다. 또한 Facebook에서 만들고 유지 관리합니다.

대부분의 사람들은 위의 말에 놀랄 것입니다.

단일 프레임워크로 Android 및 IOS용 모바일 애플리케이션을 만들 수 있습니까?

기술 세계의 업데이트를 따르지 않으면 알게 될 가능성이 없습니다. 예, React Native를 사용하여 크로스 플랫폼(Android 및 IOS 모두) 애플리케이션을 만들 수 있습니다. 그리고 크로스 플랫폼 애플리케이션 개발을 위한 다른 프레임워크가 존재합니다.

React Native는 동종 제품 중 가장 인기 있는 것 중 하나입니다. 네이티브 애플리케이션의 JavaScript 제한으로 인해 가장 인기 있는 것은 아닙니다. 그러나 개발 분야에서 빛을 발합니다. 페이스북, 인스타그램, 플립카트 등 대기업에서도 사용하고 있습니다. 꼭 사용해야 하는 것은 아닙니다. 즉, React Native로 크로스 플랫폼 프로덕션 레벨 애플리케이션을 빌드할 수 있습니다.

위의 단락에서 기본 응용 프로그램 이라는 단어 그룹을 사용했습니다. 그들은 무엇인가? 새로운 유형의 응용 프로그램이 아닙니다. 기본 애플리케이션은 특정 플랫폼을 위해 특별히 생성됩니다. Android 모바일용 Android 앱, iPhone 모바일용 IOS 앱, Windows용 Windows 앱 등,

React Native 에서 Native 의 문제는 무엇입니까? 이에 따라 React Native는 우리의 희망에 따라 Android와 IOS 모두에 적합한 기본 애플리케이션을 만듭니다. React Native로 개발된 애플리케이션은 Android용 Android Studio와 동일하고 IOS용으로도 유사합니다.

아마도 제작자는 그것 때문에 React Native라는 이름을 지었을 것입니다. 사실이 아닙니다.

React Native의 기능에 관해서는 많은 기능이 우리를 기다리고 있습니다. 그 중 몇 가지 주요 기능을 살펴보겠습니다.

#1. 크로스 플랫폼

단일 코드 기반으로 Android 및 IOS용 모바일 애플리케이션을 동시에 만들 수 있습니다. 그것은 회사에 많은 시간과 돈을 절약합니다.

#2. 핫 또는 라이브 재장전

React 또는 React Native 애플리케이션에 대한 경험이 있다면 아마 알고 있을 것입니다. 이 기능은 코드를 변경할 때 새 업데이트로 전체 애플리케이션을 다시 로드합니다. 코드를 변경할 때마다 새로고침 버튼을 누를 필요가 없습니다. 코드를 업데이트하고 변경 사항을 확인하십시오. 그게 다야 버그가 없으면 아무것도 기다릴 필요가 없습니다.

부차적인 기능처럼 보일 수 있습니다. 그러나 프레임워크 없이 Android 개발을 시작했다면 React Native에서 이 기능의 가치를 이해할 수 있을 것입니다.

#삼. UI 라이브러리 및 커뮤니티

React Native에는 많은 기본 제공 기본 구성 요소가 있습니다. 추가 설정이나 설치 없이 바로 사용할 수 있습니다. 기본 구성 요소는 각 플랫폼에서 기본적으로 보입니다. React Native 애플리케이션 UI는 Android 네이티브 UI는 물론 IOS 네이티브 UI와도 일치합니다. React Native에는 React와 유사한 구성 요소가 있습니다.

그리고 커뮤니티에 관해서. 규모가 크고 계속 증가하고 있습니다. 커뮤니티에 갇혔을 때 어려움 없이 커뮤니티에서 도움을 받을 수 있습니다.

개요

인터넷에서 React Native의 다른 많은 기능을 찾을 수 있습니다. 모바일 앱 개발에 참여하는 경우에도 살펴보십시오. 프론트엔드 개발자는 React Native를 사용하여 네이티브 애플리케이션을 개발할 수도 있습니다. 그것은 크로스 플랫폼 모바일 애플리케이션의 개발을 쉽게 만듭니다.

반응 대 네이티브 반응

React와 React Native 사이에는 몇 가지 유사점과 차이점이 있습니다. 그들을 살펴보자.

React와 React Native의 응용 프로그램에 관해서는 서로 완전히 다릅니다. 그러나 원칙에 관해서는 비슷해 보입니다. React와 React Native에는 모두 구성 요소가 있습니다. 그리고 그들은 각각의 개발에서 동일한 원칙을 따릅니다.

둘 다 개발을 위해 JavaScript 언어를 사용합니다. 두 앱 모두에서 간단한 Hello, World 앱을 살펴보겠습니다.

반응

 import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="container"> <h1>Hello, Wolrd!</h1> </div> ); } } export default App;

네이티브 반응

 import React from 'react'; import { Text, View } from 'react-native'; const App = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Text>Hello, world!</Text> </View> ) } export default App;

보시다시피 둘 다 React 패키지를 사용합니다. 구문은 JSX라는 특수 마크업을 사용하기 때문에 두 앱에서 비슷해 보입니다. 그러나 렌더링 부분에 관해서는 둘 다 다른 것을 사용합니다. React는 Virtual DOM을 사용하고 React Native는 UI 렌더링을 위해 Native API 를 사용합니다.

React 애플리케이션의 명령문 관리를 위한 Redux, MobX 등과 같은 몇 가지 외부 패키지가 있습니다. React Native 애플리케이션에서도 동일한 패키지를 사용할 수 있습니다.

React와 React Native는 모두 JavaScript를 사용합니다. 따라서 거의 모든 JavaScript 패키지를 둘 다와 함께 사용할 수 있습니다. 이렇게 하면 두 패키지 라이브러리 모두에 많은 패키지가 추가됩니다.

React와 React Native는 서로 관련되어 있습니다. 그러나 그들은 다른 목적으로 사용됩니다.

결론

React와 React Native는 최종 제품과 애플리케이션 플랫폼이 다릅니다. 그러나 각각의 응용 프로그램을 개발할 때 유사한 원칙을 따릅니다. React 또는 React Native의 두 프레임워크 중 하나를 배울 수 있다면 다른 프레임워크를 배우는 속도를 높일 수 있습니다. 그러나 React Native 애플리케이션을 개발하려면 React 지식이 필요합니다. 하지만 그것으로 충분하지 않습니다. React Native에서는 지원이 제한되어 있으므로 기본 애플리케이션 개발에 대해 더 많이 알아야 합니다.

향후 완전한 지원을 위해 궁극적으로 진화하기를 바랍니다.

웹 또는 모바일 애플리케이션 개발을 시작하려는 경우 React 또는 React Native를 선택하면 향후에 확실히 도움이 될 것입니다. 하지만 필수 사항은 아닙니다.

JavaScript를 알고 있다면 React의 개념을 배우는 것은 케이크 워크입니다. 공식 문서는 React 또는 React Native를 시작하는 데 유용한 리소스입니다.

행복한 지식