React와 React Native 이해하기

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

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

왜 이게 다야?

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

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

반응하다 그리고 네이티브 반응 두 가지 프레임워크입니다. 이름 사이에 추가 단어가 있어 비슷해 보입니다. 그래서 사람들은 첫눈에 이름 때문에 혼동하는 경우가 많습니다. 당신이 같은 혼란을 겪고 있다면, 당신은 그들 뒤에 숨겨진 수수께끼를 풀 수 있는 올바른 위치에 있습니다.

알아 보자.

반응하다

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, Conditional Rendering 등과 같은 다른 많은 기능이 있습니다. 그들은 부차적입니다. 우리는 React 라이브러리의 주요 기능을 보았습니다. React의 응용 프로그램에 관해서는 거의 모든 유형의 웹 응용 프로그램을 만들 수 있습니다. React 커뮤니티는 거대합니다. React와 함께 사용할 수 있는 많은 패키지를 찾을 수 있습니다.

네이티브 반응

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

대부분의 당신은 위의 진술에 놀랄 것입니다.

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

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

React Native는 가장 인기 있는 종류 중 하나입니다. 네이티브 애플리케이션의 JavaScript 제한 때문에 가장 많이 사용되는 것은 아닙니다. 그러나 개발 영역에서 빛을 발합니다. Facebook, Instagram, Flipkart 등과 같은 대기업에서도 사용합니다. 사용해야 한다는 의미는 아닙니다. 이는 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 애플리케이션에 대한 경험이 있다면 아마 알고 있을 것입니다. 이 기능은 코드를 변경할 때 새 업데이트로 전체 애플리케이션을 다시 로드합니다. 코드를 변경할 때마다 새로고침 버튼을 누를 필요가 없습니다. 코드를 업데이트하고 변경 사항을 확인하십시오. 그게 다야. 버그가 없으면 아무것도 기다릴 필요가 없습니다.

부수적인 기능처럼 보일 수 있습니다. 하지만 프레임워크 없이 안드로이드 개발을 했다면 React Native에서 이 기능의 가치를 이해할 것입니다.

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

React Native에는 많은 기본 제공 구성 요소가 있습니다. 추가 설정이나 설치 없이 바로 사용할 수 있습니다. 네이티브 구성 요소는 각 플랫폼에서 네이티브로 보입니다. React Native 애플리케이션 UI는 IOS 기본 UI 및 Android 기본 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를 선택하는 것이 미래에 확실히 도움이 될 것입니다. 하지만 필수는 아닙니다.

React의 개념을 배우는 것은 식은 죽 먹기입니다. 자바스크립트를 안다. 공식 문서는 React 또는 React Native를 시작하는 데 훌륭한 리소스가 될 것입니다.

행복한 지식 🙂