5/19 HTML 개념, DOM 개념, 랜더러와 랜더링, react-native 명령과 구동원리, JSX 개념과 구조

AWS 클라우드환경 네이티브 수업 8일차

 

진행​

리액트 네이티브 책 46~72p

​app.tsx 에 각종 예제 코딩 실습 진행

 

 

요약

1. react native 구동 기본 개념

2. 문법 기본 구조

3. 데이터 배열을 컴포넌트 배열로 만들기

4. 조건문 종류 뭐뭐 있나~

 

 

 

---

 

 

 

46~59

 

프로젝트 만들어 봄

​

정적 HTML

웹 서버에서 HTML 문서를 생성하여 웹 브라우저로 전송하는 방식

​

동적 HTML

웹 브라우저에서 자바스크립트 코드를 실행하여 동적으로 HTML을 생성하는 방식

​

DOM

객체 모델, 자바스크립트 코드에서 HTMLDivElement, HTMLHeadingElement 같은 클래스를 말한다.

​

DOM 객체

DOM 클래스의 인스턴스

​

DOM 구조(트리구조)

DOM 객체가 이루는 부모/자식 형태의 구조

​

렌더링

웹브라우저가 HTML을 파싱하여 자바 스크립드 DOM구조로 만드는 것

​

물리 DOM

웹 브라우저에서 자바스크립트 코드가 생성하는 실제 DOM 구조

​

가상 DOM

리액트 코드가 생성한 자바 스크립트 객체 구조

​

렌더러

리액트는 특정 시점에서 가상 DOM구조를 물리로 만드는 데

이를 리액트가 렌더링한다 하고 이 기능을 수행하는 패키지를 렌더러라고 함

​

react 패키지

코딩했던 App.tsx 파일을 가상 DOM 구조로 만드는 역할하는 패키지

​

react native 패키지

가상 DOM 구조로 만든 리액트 요소를 안드로이드 프레임 워크나 iOS용 프레임 워크의 화면 UI 객체로 바꾸는 역할을 함

 

브리지 방식 렌더링

리액트 네이티브 앱을 폰에 설치하고 실행하면 리액트 네이티브의 네이티브 모듈이 실행되면서

네이티브(안드로이드 프레임워크) 를 담당하는 UI 스레드와

App.tsx 같은 자바스크립트 코드를 실행하는 자바스크립트 엔진 스레드 2개가 동시에 동작.

사용자가 화면을 터치하면 UI스레드는 이 내용을 자바 스크립트 쪽 스레드에 이벤트 형태로 넘기는 것처럼

동작하는 프레임 워크를 브리지 방식이라고 함.

​

스레드

운영체제가 제공하는 서비스로써 자바스크립트 엔진처럼 1개의 스레드에서 동작하는 앱을 단일 스레드 앱

리액트 네이티브 앱처럼 2개 이상의 스레드에서 동작하는 앱을 다중 스레드 앱 이라고 한다.

 

npx react-native link 명령

리액트 네이티브 전용 패키지에는 항상 자바스크립트 스레드에서 동작하는 쪽과 UI 스레드에서 동작하는 쪽이 따로 있다.

때문에 위의 명령으로 자바스크립트 쪽에 설치한 것을 네이티브(UI스레드)에 링크 시키지 않으면 정상 동작을 하지 않는다.

 

react-native-cli 명령

네이티브 모듈에서 동작하는 자바스크립트 엔진이 가상 DOM 객체를 넘겨주는 App의 존재를 알 수 있도록index.js 파일과 자바 파일을 만든다.폰에서 실행을 하게 되면 자바 파일이 실행 후 index의 존재를 알게 해서 index로 App.tsx을 호출 하여가상 DOM 객체를 브리지를 통해 네이티브로 넘겨 결과값을 얻는다.

 

npm start 명령

설치된 앱이 처음 구동될 때 앱이 수신해야할 ES5 자바스크립트 코드로 컴파일된 타입스크립트 코드 번들을 제공하는 메트로 서버를 실행하는 명령

​

npm run android 명령

타입스크립트 코드와 상관없이 android 디렉터리만을 대상으로

자바 언어로 작성한 네이티브 앱 부분을 빌드하여 에뮬레이터에 앱을 설치하는 명령

​

 

 

---

 

 

​

60~72

JSX 개념~ 구조

​

JSX

리액트와 리액트 네이티브에서 자바스크립트와 XML 구문을 결합해 사용하는 코드.

페이스북이 코드 작성 시 일일히 React.createElement 호출 코드를 작성하는 대신 ​JSX만 작성하면 되게 만들어놨다~

=> 간편 + 개발 생산성 향상

 

JSX구문이 존재 시 아래 구문은 필수.

import React from 'react'

​

JSX 구문이 있는 타입스크립트 코드는 확장자가 .tsx여야 함.

 

​

마크업 언어 문법

 

    < div id="root"> <h1>Hello world</h1> </div>​

시작태그/  속성/                자식 태그           / 끝 태그

​

자식 요소가 없다면

<태그 / >

로 스스로 닫는 태그 사용하면 된다.

 

 

React.createElement는 컴포넌트를 가상 DOM 객체로 만든다.

컴포넌트에는 속성과 자식 컴포넌트가 올 수 있으므로 

 

가상DOM객체 = createElement(컴포넌트이름, 속성, 자식컴포넌트)

 

로 구현하는데 이를 XML로 

 

<Text>Hello World</Text>

 

요런 느낌으로 간편하게 표현 끝.

이제는 자식 요소에 자바스크립트 코드를 삽입하기 위해 아래와 같이 문법을 개조한다.

 

 

 

JSX 구문 중괄호

중괄호로 변수를 감싸는 방법으로 XML 구문 안에 변수 표현 가능.

 

<Text>{변수}</Text>

 

 

 

JSX 구문 응용

 

JSX문은 React.createElement 호출이기 때문에

아래처럼 JSX문 자체를 변수에 담을 수가 있다.

const virualDOM = <SafeAreaView><Text>Hello World</Text></SafeAreaView>

​

 

혹은 변수 담는 과정을 생략하고 반환값으로도 바로 사용 가능.

export default function App() {

return <SafeAreaView><Text>Hello World</Text></SafeAreaView>

}

​

​

 

표현식과 실행문

표현식

return 키워드 없이 어떤 값을 반환하는 코드를 말함. 값 그 자체.

 

실행문

값이 아님.

if / for / switch/ case 문 같은 것들.

이 것들은 JSX 코드 안에서 사용이 불가 하기 때문에 JSX문 밖에 두어서 구동 시킨다.

 

​배열을 JSX문으로 만들 때 조심할 점

JSX 문에서는 자식 컴포넌트가 여러 개면 각각 부모-자식 컴포넌트 형태로 만들어야 함.

 

데이터 배열을 컴포넌트 배열로 만들기 실습

​

 

 

---

 

 

​

※참고1

리액트 네이티브 프로젝트 폴더 구성 시, 문제 발생 할 때 아래 명령어 참고

npm uninstall -g react-native-cli

npm i -g @react-native-community/cli

​

​

※참고2

 

if (변수) {

참이면 실행

} else if(조건){

참이면 실행

} else {

다 아니면 실행

}

​

while (조건){

참이면 실행

}

​

do {

실행

} while (조건)

​

switch (값)

{

case 'a' :

실행

break;

case 'b' :

실행

break;

}

​

for (초기값 ; 조건 ; 증감)

{

조건 부합 시 실행

}

​

a ? b : c

a가 참이면 b, 거짓이면 c 실행