1장 리액트 네이티브란?

리액트 네이티브(React Native)

• 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트
• UI를 만드는 리액트에 기반을 두고 제작
• 리액트와 달리 웹브라우저가 아닌 iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크

 

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

장점

• 코드를 플랫폼 간 공유 가능 -> 두 플랫폼(iOS, 안드로이드) 동시 개발 가능
• JS만 알아도 개발 가능
• 작성된 구성 요소들이 재사용 가능
• 패스트 리프레쉬 기능 제공 : 변경된 코드를 저장하기만 해도 화면에 바로 적용됨. (새로고침/컴파일 등이 불필요)
• 코도바(Cordova)나 앵귤러(AngularJS) 프레임워크에 비해 렌더링면에서 성능이 뛰어남.
  • 리액트 네이티브는 작성된 코드에 따라 그에 알맞은 네이티브 element로 전환됨. / 코도바나 아이오닉은 웹뷰(WebView)를 이용하여 렌더링

 

단점

• 네이티브의 새로운 기능을 사용하는 데 오래 걸림
  • 플랫폼에서 업데이트를 통해 새로운 API를 제공하더라도 리액트 네이티브가 이를 지원하기까지는 시간이 걸림.
• 유지보수 어려움
• 잦은 업데이트

---

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

브릿지(bridge)

: JS 코드를 통해 네이티브 계층과 통신할 수 있도록 연결하는 역할

리액트 네이티브 브릿지

• JS 스레드(thread)에서 정보를 받아 네이티브로 전달
  • JS 스레드 : JS 코드가 실행되는 장소, 주로 리액트 코드로 구성
• 네이티브 영역 구성
  • 메인 스레드 : UI 담당
  • 섀도(shadow) 스레드 : 레이아웃을 계산하는 데 사용하는 백그라운드 스래드
  • 네이티브 모듈 - 각 모듈에는 자체 스레드가 있음.
    • 단, 안드로이드의 경우 스레드 폴(thread pool) 공유

 

가상 DOM

: 화면에 보이지 않지만 비교를 위해 존재하는 DOM

• 실제 DOM : 우리가 보는 화면에 나타나는 DOM

가상 DOM

 

데이터가 변했을 때 화면이 다시 그려지는 과정

1. 데이터 변화가 생김.
2. 변화된 데이터로 가상 DOM을 그림.
3. 가상 DOM과 실제 DOM을 비교하여 차이점 확인.
4. 차이점이 있는 부분만 실제 DOM에 반영.

 

JSX(JavaScript XML)

예시 코드 (JSX -> JS)

• JSX로 작성된 코드는 나중에 바벨(Babel)을 사용하여 JS로 변환됨.
• JSX로 작성하면 가독성이 더 좋고, 바벨이 코드 변환 과정에서 오류 검사도 해줌.

 

 

 

본문에서 설명하는 내용과 사용한 이미지는 책 '처음 배우는 리액트 네이티브'를 참고하였습니다.