1장. 리액트 네이티브란?

리액트 네이티브 : 페이스북에 의해 공개된 오픈소스 프로젝트
사용자 인터페이스를 만드는 리액트에 기반을 두고 제작됨
리액트와 달리 웹 브라우저가 아닌, ios와 안드로이드에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크

▶️ 1.1 리액트 네이티브의 장점과 단점

1.1.1 장점

• 코드 대부분 플랫폼 간 공유가 가능해 두 플랫폼(iOS, android)을 동시에 개발할 수 있음
• 모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있다면 쉽게 시작 가능
• 작성된 구성 요소들의 재사용 가능
• 패스트 리프레쉬 기능 제공 : 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있음
• 코도바, 아이오닉(앵귤러 프레임워크 기반)과 같은 크로스 플랫폼 개발 방법에 비해 큰 장점을 가짐
  • 코도바, 아이오닉 : 웹뷰를 이용해 렌더링하는 방식으로 성능이 떨어지는 단점 존재
  • RN : 각 플랫폼에서 그에 알맞은 네이티브 엘리먼트로 전환되기에 큰 성능의 저하 없이 개발이 가능
  • etc. 크로스 플랫펌 개발 프레임워크
    • 타이타늄
    • 네이티브스크립트
    • 뷰네이티브
    • 플러터

1.1.2 단점

• RN이 네이티브 코드로 전환되는 장점은 있으나, 네이티브의 새로운 개능을 사용하는 데 오래 걸림
  • 안드로이드, iOS에서 업데이트를 통해 새로운 API를 제공해도 RN이 지원하기까지 시간 소요
• 유지보수의 어려움
  • 개발 중 문제 발생 시, 문제 종류에 따라 원인을 찾고 문제를 해결하는 데에 많은 시간 소요
• 잦은 업데이트로 인한 개발의 방향
  • 리액트 버전 변화에 따라 리액트 네이티브에도 많은 변화가 수반됨

▶️ 1.2 리액트 네이티브의 동작 방식

1.2.1 브릿지

브릿지 : 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할을 수행

• 브릿지 : 자바스크립트 스레드에서 정보를 받아 네이티브로 전달
• 자바스크립트 스레드 : 자바스크립트 소스가 실행되는 장소 (리액트 코드로 구성)
• 네이티브 영역 :
  • 메인 스레드 : UI를 담당하는 메인 스레드
  • 섀도 스레드 : 레이아웃을 계산하는 데 사용되는 백그라운드 스레드
• (안드로이드의 경우) : 스레드 폴(thread pool)을 공유

1.2.2 가상 DOM

리액트 네이티브의 동작 방식 이해를 위해서는 데이터가 변할 경우 자동으로 화면을 다시 그리는 리액트의 가상 DOM에 대한 이해가 필요

데이터가 변했을 떄 다시 그려지는 과정
1. 데이터에 변화 발생
1. 변화된 데이터를 이용해 가상 DOM 그림
1. 가상 DOM과 실제 DOM을 비교해 차이점을 확인
1. 차이점이 있는 부분만 실제 DOM에 적용해 그림

• 실제 DOM : 우리가 보이는 화면에 나타나는 DOM
• 가상 DOM : 화면에 보이지 않지만 비교를 위해 존재하는 DOM

1.2.3 JSX

JSX : javascript 확장 문법으로 XML과 매우 유사

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: "Yoo",
    lastName: "Jimin",
};

const element = <h1>Hello, {formatName(user)}!</h1>;

• JSX로 작성된 코드는 추후 바벨을 사용해 자바스크립트로 변환됨

• 위 코드를 변환했을 때,

'use strict'

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: "Yoo",
    lastName: "Jimin"
};

const element = /*#__PURE__*/ React.createElement(
    'h1',
    null,
    'Hello, ',
    formatName(user),
    '!'
);

• JSX : 코드의 가독성이 더 뛰어나며 오류 검사에도 장점 존재