728x90 이론7 [React Native] 리액트 네이티브 React.createElement와 JSX 구문과의 관계 아래 예제에서 Text를 리액트와 리액트 네이티브에서는 컴포넌트(Component)라 합니다. App.tsx import React from 'react' import {Text} from 'react-native' export default function App(){ const textElement = React.createElement(Text, null, 'Hello World') return text Element } React.createElement는 컴포넌트를 가상 DOM 객체로 만듭니다. 컴포넌트는 여러개의 속성(propeaty)과 하나 이상의 자식 컴포넌트를 가질 수 있습니다. 따라서 컴포넌트에는 속성과 자식 컴포넌트가 올 수 있으므로 React.createElement는 다음 형태로 .. 2021. 9. 24. [React Native] 리액트 네이티브 React.createElement API 리액트와 리액트 네이티브에서 React.createElement API는 가장 저수준 기능으로서 가상 DOM 객체를 생성한다. HTML로 웹 브라우저에 'Hello World' 등의 텍스트를 출력하려면 아래와 같이 작성한다. Hello world 그러면 웹 브라우저가 렌더링하여 화면에 웹 페이지를 표시한다. 자바스크립트로 앞의 HTML 텍스트과 동일한 효과를 구현하면 다음과 같은 코드로 물리 DOM 객체를 생성한다. const pElement = document.createElement('p') pElement.innerText = 'Hello JavaScript world' 그리고 이 물리 DOM 객체는 다음 코드가 있어야만 렌더링되어 화면에 나타난다. document.body.appendChild(p.. 2021. 9. 17. [React Native] 리액트 네이티브 DOM과 렌더링 - 물리 DOM, 가상 DOM, 차이점, react 패키지 역할, 브릿지 방식 렌더링 리액트 네이티브 DOM과 렌더링 DHTML 방식은 자바스크립트가 Hello world와 같은 텍스트를 만드는 것이 아니라 객체 지향 언어의 상속 관계로 설계한 문서 객체 모델(Document Object Model, DOM)타입 자바스크립트 객체를 생성하는 방식으로 동작한다. 웹 브라우저는 정적 HTML 문서를 만나면 파싱(parsing) 과정을 거쳐 웹 브라우저 개발 도구 창(F12)에서 본 DOM 트리 같은 형태의 자바스크립트 객체 구조를 만든다. 웹 브라우저는 , 과 같은 HTML 형태로 보여주지만 자바스크립트 코드 관점에서 는 HTMLDivElement 클래스의 인스턴스(instance)이고, 은 HTMLHeadingElement클래스의 인스턴스이다. HTMLDivElement, HTMLHeadi.. 2021. 9. 16. [ReactNative] 리액트 네이티브 대상 플랫폼 API 리액트 웹과 리액트 네이티브의 가장 큰 차이점은 대상 플랫폼 API를 대하는 방식입니다. 웹 환경에서는 아직도 브라우저마다 표준 기술을 지원하고 있는 정도가 다른데 이런 파편화 특성은 해결해야 하는 문제로 취급됩니다. 이와 달리 리액트 네이티브에서는 해당 플랫폼에서만 지원하는 플랫폼 특유의 API는 멋지고 자연스러운 사용자 경험을 만듦에 있어 중요한 열쇠가 됩니다. 물론 여기에도 고려해야 할 사항이 많은데 모바일 API는 데이터 저장소, 위치 서비스, 카메라와 같은 하드웨어 접근에 대한 모든 것을 포함하고 있습니다. 기본적으로 iOS와 안드로이드를 위한 리액트 네이티브는 일반적으로 많이 사용되는 기능을 대부분 지원하고 있습니다. 그리고 리액트 네이티브는 비동기 네이티브 API도 지원합니다. 그리고 대상 .. 2021. 9. 1. [ReactNative] 리액트 네이티브 컴포넌트 만들기 (뷰 작업, JSX 사용, 네이티브 컴포넌트 스타일링) 모든 리액트의 코드는 리액트 컴포넌트 안에 존재합니다. 리액트 네이티브 컴포넌트는 일반적인 리액트 컴포넌트와 대부분 비슷하지만 렌더링과 스타일 적용 방법에서 큰 차이가 있습니다. 뷰 작업하기 리액트를 이용해서 웹 페이지를 만들 떄는 일반적인 HTML요소 (, , 등)를 사용하여 렌더링 합니다. 리액트 네이티브는 이러한 요소 대신에 플랫폼에 종속적인 리액트 컴포넌트를 사용합니다. 리액트 리액트 네이티브 , , 자식 아이템 가장 기본적인 컴포넌트는 크로스 플랫폼 인데, 단순하고 유연한 UI 요소로 와 유사합니다. 컴포넌트는 iOS에서는 UIView로 렌터링되고 안드로이드에서는 VIEW로 렌더링 됩니다. 다른 컴포넌트들은 특정 플랫폼에서만 동작합니다. 예를 들어 는 iOS의 표준 날짜 선택기를 렌더링합니다. .. 2021. 8. 30. [React Native] 리액트 네이티브 동작 원리(DOM, bridge, 렌더링 라이프 사이클 ) 기술적인 측면에서 리액트 네이티브의 동작 원리를 이해하려면 먼저 리액트의 특징 중 하나인 가상(Virtual) DOM에 대해 알아야 합니다. 리액트에서 가상 DOM은 '화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어'에 해당됩니다. 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서 개발자는 반드시 브라우저의 DOM(Document Object Model)을 수정해야합니다. 하지만 과도한 DOM 수정은 심각한 성능 저하를 유발합니다. 리액트는 페이지의 변화를 바로 렌더링하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링 합니다. state 변경 -> 차이점 계산 -> 다시 렌더링.. 2021. 8. 24. [React Native] 리액트 네이티브란? 개념과 특징, 장단점 ! 리액트 네이티브란?! 리액트 네이브는 'iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크'입니다. 리액트 네이티브는 사용자 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있는데, 브라우저가 아닌 모바일 플랫폼이 타깃입니다. 즉, 웹 개발자가 익숙한 자바스크립트 라이브러리를 이용하면서 겉모습과 실제 동작까지 진짜 네이티브인 모바일 앱을 만들 수 있습니다. 게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하면 iOS와 안드로이드 앱을 동시에 개발할 수 있습니다! 공식 리액트 네이티브 프로젝트는 iOS와 안드로이드에서 모두 동작하는 모바일 앱을 작성할 수 있게 해 주는데, 커뮤니티 프로젝트를 이용하면 리액트 네이티.. 2021. 8. 19. 이전 1 다음 728x90
