React와 React Native 이해하기

인간은 수많은 것들에 대해 혼란을 느낄 수 있습니다. 이러한 혼란은 사물의 다양한 속성으로 인해 발생하곤 합니다. 그중에서도 가장 흔하게 혼동하는 것은 바로 ‘이름’입니다.

우리는 새로운 대상을 접할 때 가장 먼저 그 이름을 알게 됩니다. 사람, 동물, 제품, 소프트웨어 등… 이름을 통해 검색하면 다양한 기능, 용도, 관련 정보들을 찾을 수 있습니다.

왜 이런 일이 벌어질까요?

흔히들 (이름) ‘React’와 ‘React Native’라는 용어를 혼동합니다. 기술 분야에 익숙하지 않은 사람들은 React Native를 React의 확장판 정도로 생각하는 경향이 있습니다. 기술 전문가라 하더라도 해당 분야에 대한 지식이 부족하다면 비슷한 생각을 할 수 있습니다.

그렇다면 React와 React Native는 정확히 무엇일까요? 왜 많은 사람들이 이 둘을 혼동하는 걸까요?

React와 React Native는 서로 다른 두 가지 프레임워크입니다. 이름에 비슷한 단어가 들어가서 혼동하기 쉽습니다. 만약 여러분도 이러한 혼란을 겪고 있다면, 이 글을 통해 그 수수께끼를 풀 수 있을 것입니다.

자, 함께 알아봅시다.

React

React는 단일 페이지 웹 애플리케이션을 구축하는 데 사용되는 JavaScript 라이브러리입니다. 웹 사용자 인터페이스(프론트엔드)를 구축할 때 가장 널리 사용되는 라이브러리 중 하나이며, 현재 가장 인기 있는 라이브러리라고 해도 과언이 아닙니다. Facebook에서 개발하고 관리하고 있으며, 종종 ReactJS라고도 불립니다.

React는 배우고 사용하기 쉬우며, 아름답고 단순하게 웹 애플리케이션을 구축할 수 있게 해줍니다. 라이브러리이기 때문에 원하는 기능을 활용하여 개발자가 원하는 대로 자유롭게 만들 수 있습니다. React를 사용하여 애플리케이션을 개발할 때 따라야 할 엄격한 규칙이 없어 자유로운 개발이 가능합니다.

React에는 많은 유용한 기능들이 있습니다. 몇 가지 주요 기능들을 살펴봅시다.

#1. 컴포넌트

React에서는 모든 것이 컴포넌트로 이루어져 있습니다. 마치 웹 애플리케이션을 구성하는 블록과 같습니다. 작은 컴포넌트들을 결합하여 더 큰 컴포넌트를 만들 수 있습니다. 각 컴포넌트는 고유한 상태와 제어 기능을 가지고 있으며, 사용자 인터페이스를 관리하고 상태에 따라 사용자에게 표시되는 내용을 결정합니다.

컴포넌트는 React의 핵심 요소이며, 재사용 가능하다는 장점이 있습니다. 한 번 작성한 컴포넌트를 여러 곳에서 활용할 수 있습니다.

컴포넌트를 작성할 때는 세심한 주의가 필요합니다. 애플리케이션이 커질수록 유지 관리가 더욱 중요해지기 때문입니다. 하나의 컴포넌트에 너무 많은 코드를 작성하면 유지 관리가 어려워질 수 있습니다. 따라서 React 컴포넌트는 작고 간결하게 유지하는 것이 좋습니다. 컴포넌트는 개발자에게 천국과 지옥을 동시에 경험하게 할 수 있습니다.

#2. 가상 DOM

웹사이트에서 버튼 내부에 로딩 애니메이션이 표시되거나, 소셜 미디어 플랫폼에서 좋아요 버튼을 누르는 즉시 좋아요 수가 증가하는 것을 본 적이 있을 것입니다. 과거에는 정보를 갱신하기 위해 페이지 전체를 다시 로드해야 했지만, 이제는 업데이트가 필요한 부분만 새로 고쳐집니다. 이것은 어떻게 가능할까요?

앞서 언급했듯이 React에서는 모든 것이 컴포넌트로 구성됩니다. 브라우저는 웹 애플리케이션 요소의 DOM 구조를 유지합니다. 웹 애플리케이션의 일부를 업데이트해야 하는 경우 DOM 조작을 통해 업데이트해야 합니다. React는 이 작업을 효율적으로 수행합니다.

React는 모든 컴포넌트에 대한 가상 DOM(DOM의 복사본)을 생성합니다. 웹 애플리케이션에서 업데이트가 필요할 때 React는 실제 DOM과 가상 DOM을 비교하고, 변경 사항이 있는 경우 해당 컴포넌트만 업데이트합니다.

#3. 단방향 데이터 흐름

데이터 흐름이 없다면 큰 컴포넌트들을 더 작은 단위로 나누어 관리하기 어려울 것입니다. 컴포넌트 간의 데이터 흐름을 위한 방법이 필요합니다.

React에서는 데이터가 한 방향으로만 흐릅니다. 즉, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. 하위 컴포넌트에서는 데이터를 업데이트할 수 없으며, 상위 컴포넌트로 데이터를 다시 보낼 수 있는 방법도 없습니다.

처음에는 단방향 데이터 흐름이 제한적으로 보일 수 있지만, 오히려 양방향 데이터 흐름보다 더 많은 제어 기능을 제공합니다.

개요

JSX, 조건부 렌더링 등 다양한 기능들이 있지만, 여기서는 React 라이브러리의 주요 기능들을 살펴보았습니다. React를 사용하면 거의 모든 종류의 웹 애플리케이션을 만들 수 있습니다. React 커뮤니티는 매우 크며, 다양한 패키지들을 활용할 수 있습니다.

React Native

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의 이 기능이 얼마나 편리한지 알 수 있을 것입니다.

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

React Native에는 다양한 기본 제공 컴포넌트가 포함되어 있어 추가 설정 없이 바로 사용할 수 있습니다. 네이티브 컴포넌트는 각 플랫폼에서 네이티브처럼 보입니다. React Native 애플리케이션 UI는 iOS 기본 UI 및 Android 기본 UI와 유사합니다. 또한, React와 유사한 컴포넌트들도 사용할 수 있습니다.

커뮤니티 역시 매우 활발하며 규모가 계속 커지고 있습니다. 개발 과정에서 어려움에 직면했을 때 커뮤니티의 도움을 쉽게 받을 수 있습니다.

개요

인터넷에서 React Native의 다양한 기능을 더 찾아볼 수 있습니다. 모바일 앱 개발을 시작하려는 경우 React Native를 살펴보는 것이 좋습니다. 프론트엔드 개발자는 React Native를 사용하여 네이티브 애플리케이션을 쉽게 개발할 수 있습니다.

React vs. React Native

React와 React Native는 유사점과 차이점을 모두 가지고 있습니다. 함께 살펴봅시다.

React와 React Native는 적용 분야에서 완전히 다르지만, 작동 원리는 비슷합니다. 둘 다 컴포넌트 기반이며, 각각의 개발 과정에서 동일한 원칙을 따릅니다.

또한, 둘 다 JavaScript 언어를 사용합니다. 간단한 ‘Hello, World’ 앱을 살펴보겠습니다.

React:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default App;

React Native:

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는 가상 DOM을 사용하는 반면, React Native는 UI 렌더링을 위해 네이티브 API를 사용합니다.

React 애플리케이션 상태 관리를 위한 Redux, MobX 등의 외부 패키지를 사용할 수 있습니다. React Native 애플리케이션에서도 동일한 패키지를 사용할 수 있습니다.

React와 React Native는 모두 JavaScript를 사용하므로, 거의 모든 JavaScript 패키지를 함께 사용할 수 있습니다. 이는 두 라이브러리의 활용 범위를 넓혀줍니다.

React와 React Native는 밀접하게 연관되어 있지만, 서로 다른 목적을 위해 사용됩니다.

결론

React와 React Native는 최종 결과물과 적용 플랫폼 측면에서 차이가 있지만, 개발 원리는 유사합니다. 따라서, 둘 중 하나를 배우면 다른 하나를 더 빠르게 학습할 수 있습니다. 그러나 React Native 애플리케이션을 개발하려면 React에 대한 지식이 필수적입니다. 하지만 그것만으로는 부족하며, 네이티브 애플리케이션 개발에 대한 더 많은 지식이 필요합니다. React Native는 지원이 제한적이기 때문입니다.

향후 React Native가 더욱 발전하여 완벽한 지원을 제공하기를 기대합니다.

웹 또는 모바일 애플리케이션 개발을 시작하려는 경우 React 또는 React Native를 배우는 것이 앞으로 도움이 될 것입니다. 하지만 필수는 아닙니다.

React의 개념을 배우는 것은 그다지 어렵지 않습니다. JavaScript에 대한 지식이 있다면 더욱 도움이 될 것입니다. 공식 문서는 React 또는 React Native를 시작하는 데 훌륭한 자료가 될 것입니다.

즐거운 학습되세요! 🙂