[React Native] 02. 리액트 네이티브 기본 다지기 -1

이번 글에서는 02-1 리액트 네이티브 프레임워크의 작동 원리 / 02-2 JSX 구문 탐구하기 파트를 공부해봅니다 ... 

---

 

1. 리액트 네이티브 프로젝트 만들기

npx react-native init 프로젝트 디렉토리명 --template react-native-template-typescript

 

2. npm start

※ 이때 알맞은 프로젝트 디렉토리에서 npm start를 실행하지 않으면 아래와 같은 오류가 발생할 수 있다. 

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/parkseyeon/React-Native/package.json
npm ERR! errno -2
npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/Users/parkseyeon/React-Native/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

 

 

그러므로 다른 경로에 위치해 있다면 명령어 cd 를 이용해 올바른 디렉토리로 이동한 뒤에 npm start 명령어를 실행한다.

 

3. 안드로이드 개발 시 ➡️ npm run android / ios 개발 시 ➡️ npm rum ios

※ npm 을 실행할 때와 마찬가지로 올바른 프로젝트 디렉토리에 위치해야 함

 

 

---

물리 DOM 과 가상 DOM

DOM : Document Object Model

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

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

 

가상 DOM 구조 ➡️ 물리 DOM 구조 : 리액트가 렌더링하는 것

 

브리지 방식 렌더링

UI 스레드와 자바스크립트 쪽 스레드가 메시지 큐 방식으로 렌더링과 관련된 데이터를 주고 받는 방식

✅ UI 스레드는 사용자의 반응을 자바스크립트 쪽 스레드에 이벤트 형태로 넘김

 

JavaScriptCore (자바스크립트 엔진) 동작 ✅ C++ 언어로 구현됨

➡️ 안드로이드에서는 JNI(Java Native Interface) 방식으로 연결

➡️ iOS에서는 FFI(Foreign Functioin Interface) 방식으로 연결

 

물리 DOM 객체 생성 (자바스크립트)

const pElement = document.createElement('p')
pElement.innerText = 'Hello JavaScript world!'

 

가상 DOM 객체 생성 (리액트 프레임워크/ 리액트 네이티브도 같은 방법으로 가상 DOM 객체 생성)

const pElement = React.createElement('p', null, 'Hello React world!')

이 가상 DOM 객체를 물리 DOM 객체로 변환하여 화면에 표시하려면

import ReactDOM from 'react-dom'

ReactDOM.render(pElement, document.body)

 

리액트 네이티브 렌더러는 네이티브에서 동작하므로

export default function App(){
	const textElement = React.createElement(Text, null 'Hello world!')
    return textElement
}

 

 

리액트 네이티브 개발에서 사용하는 명령

npm i : package.json 파일에 명시된 패키지를 node_modules 디렉터리에 설치

npx pod-install : pod 프로그램을 실행하여 원격지 저장소에서 필요한 패키지를 내려받음

npm start : 메트로 서버 실행 (에뮬레이터에 설치된 앱이 처음 실행될 때 메트로 서버에서 ES5 자바스크립트 코드를 내려받아야하므로

 

프로젝트 초기화 명령

cd android

./gradlew clean : ./gradew installDebug 명령으로 생성된 임시 파일을 지움

rm -rf .gradle (맥) : 빌드한 앱 삭제

cd ios

xcodebuild clean : Xcode가 생성한 임시 파일 지움

pod deintegrate : npx pod-install 명령으로 내려받은 패키지를 지움

 

코드 디버깅

App.tsx 파일에서 console.log() 사용

 

---

JSX = JavaScript + XML

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

그리고 아래와 같은 import 문이 필요하다.

import React from 'react'

✅ JSX 코드 안에서는 실행문(ex. if문) 을 사용할 수 없고 표현식만 작성할 수 있다.

➡️ if 문을 JSX 문 바깥에 두게 하면 된다.

➡️ if 문을 단축 평가 형태로 구현하면 된다. ex) {isLoading && <Text>Loading...</Text>}

➡️ JSX 문을 변수에 담아 문제를 해결한다.  🔎 배열에 여러 개의 JSX 문을 담을 수도 있음

 

✅ 배열에 여러 개의 JSX 문을 담을 때는 부모 컴포넌트의 자식 컴포넌트 형태로 만들어야 한다.

export default functioin App(){
	const children = [
    	<Text>Hello world!</Text>
        <Text>Hello world!</Text>
        <Text>Hello world!</Text>
    ]
    return children <- 불가능!!
    return {children} <- 불가능!!
    return <SafeAreaView>{children}</SafeAreaView> <- 가능!!

✅ JSX 코드 내의 모든 줄은 React.createElement 호출 코드로 변환될 수 있어야 한다.