728x90 React Native11 [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] Xcode iOS 앱 프로젝트 생성 XCode를 실행하고 file -> New -> Project 메뉴를 클릭합니다. 다음 화면에서 Document App 을 선택하고 Next를 누릅니다. 다음 화면에서 Project Name 항목에는 프로젝트 이름을 입력하고 Interface 항목에는 Storyboard를, Language 항목에는 Objective-C를 선택하고 Next를 누릅니다. 그리고 프로젝트를 저장할 디렉터리를 선택하고 Create버튼을 누르면 다음처럼 Xcode 프로젝트 화면이 나타납니다. 화면 왼쪽 위 화살표 아이콘 오른쪽에 있는 실핼 대상 시뮬레이터를 눌면 다양한 iOS 시뮬레이터가 나오고 다크모드를 제공하는 iPhone 11 시리즈를 선택합니다. 2021. 9. 27. [React Native] 안드로이드 앱 프로젝트 생성 안드로이드 스튜디오 초기 화면에서 를 누릅니다. 다음 화면이 나오면 를 선택하고 를 누릅니다. 이어서 Save location에는 안드로이드 프로젝트를 저장할 디렉터리를 설정하고 Language 항목은 Java로 선택한 후 Finish를 눌러 프로젝트를 생성합니다. 그러면 다음 처럼 안드로이드 스튜디오 프로젝트 화면이 나타납니다. 그래들 빌드가 끝나면 Run 메뉴 가장 위의 Run 'app'을 실행합니다. 그러면 안드로이드 에뮬레이터에는 다음의 왼쪽과 같이 빌드한 앱을 실행한 모습이 나타납니다. 2021. 9. 27. [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. 이전 1 2 다음 728x90
