[React Native] React vs React Native(RN)

React Native 개발 공부를 위해, 정리 및 작성을 하게되었습니다.

 

- React.js

사용자 인터페이스 및 웹 애플리케이션 구축을 위해 프론트 엔드 웹과 서버에서 실행되는 것을 지원하는 JavaScript 라이브러리

[문서] https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

- React Native(RN)

ReactJS를 사용하여 구성 요소를 빌드하고 ReactJS를 구현할 수있는 JavaScript로 다양한 플랫폼 (iOS, Android 및 Windows Mobile)에 대한 기본 모바일 애플리케이션을 빌드 할 수 있는 기본 앱 구성 요소로 컴파일되는 모바일 프레임 워크

[문서] https://reactnative.dev/docs/getting-started

Introduction · React Native

 

 

React Native 사용시 고려점

1. 주요 초점은 모바일 사용자 인터페이스 집중 되어있음

2. 코드가 HTML 페이지에서 렌더링되지 않기 때문에 이는 이전에 React 에서 사용한 모든 종류의 HTML, SVG 또는 Canvas를 렌더링하는 라이브러리를 재사용 할 수 없음을 의미함.

또한 React Native는 웹 요소로 만들어지지 않았으며 같은 방식으로 스타일을 지정할 수 없음.

 

공통점

React.js 와 React Native(RN)은 JavaScript에 대한 JSX 구문 확장을 따름

 

* JSX란?

JSX(JavaScript XML),

React 엘리먼트(element)를 생성해주는 템플릿 언어로, 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트의 형태 코드로 변환됨.

 

// 실제 작성할 JSX 예시
const name = 'Leo'
const element = <h1>Hello, {name} World</h1>;

ReactDom.render(
	element,
    document.getElementById('root')
)