728x90 React Native/이론16 [React Native] 리액트 네이티브 배열과 JSX구문 배열에 여러 개의 JSX문을 담을 수 있습니다. App.tsx import React from 'react' import {SafeAreaView, Text} from 'react-native' export default function App(){ const children = [ test_1 , test_2 , test_3 ] return {children} } {children} 을 보면 배열 변수에 담긴 JSX문은 반드시 부모 컴포넌트의 자식 컴포넌트 형태로 만들어야 합니다. 배열 JSX문을 만들 때 조심할 점 JSX문에서 여러개의 자식 컴포넌트가 있을 때는 반드시 XML작성 원칙을 준수해야 합니다. XML 문법에서 부모 요소 없이는 여러 개의 XML 요소를 만들 수 없습니다. JSX 역시 XML.. 2021. 9. 29. [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] 리액트 네이티브 마크업 언어 용어 HTML 마크업 언어는 xml 마크업 언어의 부분집합(subset)입니다. XML은 태그나 속성을 마음대로 확장할 수 있으나 HTML은 그렇지 못하기 때문입니다. JSX가 'JavaScript HTML'이 아니라 'JavaScript XML'인 이유는 HTML은 문서를 구성하는 요소의 태그 이름이 모두 고정되어 있지만 XML은 문서 구성 요소의 태그 이름을 자유롭게 지정할 수 있기 때문입니다. 이것이 '확장 가능(eXtensible)'의 의미 입니다. 마크업 언어 문법은 다음처럼 div와 같은 태그(tag)를 꺾쇠 기호()로 감싼 시작 태그를 처럼 만들고 처럼 태그 이름 앞에 / 기호를 추가한 끝 태그로 감싼 형태가 기본 입니다. 그리고 시작 태그에는 id, style과 같은 속성(attribute)을 .. 2021. 9. 23. [React Native] 리액트 네이티브 JSX JSX = JavaScript + XML JSX는 'JavaScript XML'의 줄임말로, XML에 자바 스크립트를 결합할 용도로 만든 구문입니다. React.createElement 호출 코드를 좀 더 단순하고 간결하게 만들 수 있고, 이를 자바스크립트를 확장하는 방식으로 구현합니다. '자바스크립트를 확장한다'라는 의미는 표준 ESNext 자바 스크립트나 타입스크립트 문법에는 JSX 구문이 없다는 뜻입니다. 리액트 네이티브 프레임워크 개발사인 페이스북은 마치 JSX 구문이 표준 자바스크립트 문법에 포함된 것처럼 동작하도록 설계했습니다. 그리고 이런 설계를 할 수 있었던 이유는 ESNext 자바스크립트 컴파일러인 바벨(babel)이 플러스인 구조로 동작하기 때문입니다. 바벨은 ESNext 자바스크립트 .. 2021. 9. 23. [React Native] 리액트 네이티브 개발에서 사용하는 명령, 초기화하는데 사용하는 명령 요약 리액트 네이티브를 개발할 때 실행하는 명령 명령 의미 npm i package.json 파일에 명시된 패키지를 node_modules 디렉터리에 설치합니다. 설치한 패키지는 android나 ios 디렉터리의 네이티브 모듈에서 동작하는 파일을 가질 수 있습니다. npx pod-install 오브젝티브-C 처럼 C 계열 언어는 원격지 저장소에서 패키지(라이브러리)를 내려받아 설치하는 기능이 없습니다. 따라서 pod 프로그램을 실행하여 원겨지 저장소에서 필요한 패키지를 내려받아 로컬 컴퓨터에 설치해야 합니다. 이와는 달리 안드로이드 빌드 도구인 그래들은 원격지 저장소의 라이브러리를 내려받는 기능이 있으므로 이 과정이 필요 없습니다. npm start npm run android나 npm run ios 명령은 .. 2021. 9. 23. [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. [React Native] 리액트 네이티브 샘플 코드 샘플 코드를 보면서 이전 게시물을 토대로 기본 앱의 소스 코드와 리액트 네이티브 프로젝트의 구조를 살펴보자! Create React Native App으로 생성한 프로젝트의 시작 코드인 App.js import React form "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render(){ return ( Hello, world! ); } } const styles = StyleSheet.create({ container : { flex: 1, backgroundColor: "#fff", alignItem: "center" justifyCont.. 2021. 9. 13. [ReactNative] 리액트 네이티브 로컬 개발 환경 설정 2가지 방법(create-react-native-app, 기본적인 방법)과 실행 리액트 네이티브 개발 환경 설정 방법은 크게 두가지로 나눌 수 있습니다. 첫번 째는 Create React Native App이라는 도구를 사용하는 방법이고 두번 째는 React-Native init 명령어를 이용하여 프로젝트를 생성하는 아주 전형적인 개발 환경 설정입니다. 교육적인 목적이나 프로토타이핑을 생각하는 초심자는 Create React Native App를 추천! 리액트 네이티브 앱을 전문적으로 사용하거나 자바스크립트와 자바, 오브젝티브-C 혹은 스위프트(Swift)코드와 같은 네이티브 코드를 함께 사용하는 하리브리드 앱을 작성하게 된다면 결국 init 명령어를 이용하여 프로젝트를 생성하는 전형적인 개발 설정을 사용하게 될 것 입니다. Create React Native App Create R.. 2021. 9. 2. [ReactNative] 리액트 네이티브 대상 플랫폼 API 리액트 웹과 리액트 네이티브의 가장 큰 차이점은 대상 플랫폼 API를 대하는 방식입니다. 웹 환경에서는 아직도 브라우저마다 표준 기술을 지원하고 있는 정도가 다른데 이런 파편화 특성은 해결해야 하는 문제로 취급됩니다. 이와 달리 리액트 네이티브에서는 해당 플랫폼에서만 지원하는 플랫폼 특유의 API는 멋지고 자연스러운 사용자 경험을 만듦에 있어 중요한 열쇠가 됩니다. 물론 여기에도 고려해야 할 사항이 많은데 모바일 API는 데이터 저장소, 위치 서비스, 카메라와 같은 하드웨어 접근에 대한 모든 것을 포함하고 있습니다. 기본적으로 iOS와 안드로이드를 위한 리액트 네이티브는 일반적으로 많이 사용되는 기능을 대부분 지원하고 있습니다. 그리고 리액트 네이티브는 비동기 네이티브 API도 지원합니다. 그리고 대상 .. 2021. 9. 1. 이전 1 2 다음 728x90
