«   2022/08   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Archives
Today
11
Total
93,048
관리 메뉴

차근차근

[React-Native] (2) 리액트 네이티브 다루기 본문

대학교/FE

[React-Native] (2) 리액트 네이티브 다루기

SWKo 2020. 3. 4. 00:56

0. 리액트 네이티브는 어떻게 동작할까?

  • 리액트에서 가상(Virtual) DOM은 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어에 해당한다.
  • 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서는 반드시 브라우저의 DOM을 수정해야한다. 이는 값비싼 동작으로, 과도한 DOM수정은 심각한 성능 저하를 유발한다.
  • 그러나!! 리액트는 페이지의 변화를 바로 렌더링하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링한다.
  • 브라우저의 DOM으로 렌더링하는 대신에 리액트 네이티브는 objective-C API를 호출하여 iOS 컴포넌트로 렌더링하고, 자바 API를 호출하여 안드로이드 컴포넌트를 렌더링한다.
  • 이는 리액트 네이티브의 '브리지'가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 때문에 가능한 일이다.
  • 리액트 네이티브에서 마크업은 대상 플랫폼에 맞춰서 전환된다. 예를 들어 <View> 는 iOS의 경우 UIView가 된다.

1. 렌더링 라이프사이클

  • 브라우저에서 리액트가 동작할 때, 렌더링 라이프 사이클은 우리가 작성한 리액트 컴포넌트를 마운팅하면서 시작한다.
  • 브리지는 자바스크립트에서 바생하는 호출을 대상 플랫폼의 API와 UI 엘리먼트를 연결한다.
  • 리액트 네이티브는 메인 UI스레드에서 동작하지 않기 때문에 사용자 경험에 영향을 주지 않고 비동기적으로 실행할 수 있다.

2. 리액트 네이티브 컴포넌트 만들기

  • 리액트 네이티브로 작업할 경우 이렇게 역할에 따라 컴포넌트를 구분하여 작성하는 것은 코드를 플랫폼에 상관없이 재사용할 때 유리하다.
  • 리액트 네이티브에서 <View>컴포넌트는 iOS에서는 UIView로 렌더링되고 안드로이드에서는 View로 렌더링된다.

3. JSX

  • 리액트 네이티브에서도 리액트와 동일하게 JSX(JavaScript XML)을 이용하여 뷰를 만든다.
  • JSX는 기술에 따라 코드를 분리하기보다는 하는 일에 따른 분리하는 것을 더 중요하게 생각했다.
  • 리액트 네이티브의 .js파일은 사실 모두 JSX파일이다.

4. 네이티브 컴포넌트 스타일링

  • 리액트 네이티브에서는 스타일을 적용하는 하나의 표준을 사용한다.
  • 리액트와 대상 플랫폼 사이의 브리지는 매우 간결하게 정리된 CSS 구현체를 가지고 있다.
  • 여기에서는 flexbox 위주로 레이아웃을 한다.
  • 웹 환경에서는 브라우저마다 지원하는 CSS의 범위가 다른데 리액트 네이티브는 같은 스타일 규칙을 지원하도록 강제할 수 있다.
  • 리액트 네이티브는 자바스크립트 객체로 존재하는 인라인 스타일을 사용하라고 강조하고 있다.
  • 스타일을 객체로 작성하는 것은 스타일시트로 작성하는 것과 다르기 때문에 스타일시트를 작성하던 기존의 습관을 버리고 새롭게 스타일을 작성하는 방법을 익혀야 한다.

5. 대상 플랫폼 API

  • 리액트 네이티브에서는 해당 플랫폼에서만 지원하는 플랫폼 특유의 API는 사용자 경험을 만듦에 있어 중요한 열쇠가 된다.
  • 모바일 API는 데이터 저장소, 위치 서비스, 카메라와 같은 하드웨어에 접근에 대한 모든 것을 포함하고 있다.
  • 만약 지원하지 않는 기능을 써야 할 상황에 처하면 직접 구현해야 할지도 모른다.
  • 컴포넌트를 분리하고 캡슐화하는 것은 앱을 더욱 유연하게 만들어준다.

'대학교 > FE' 카테고리의 다른 글

[Redux] with Redux VS without Redux  (0) 2020.03.05
[Redux] Redux 동작원리  (0) 2020.03.04
[React-Native] (2) 리액트 네이티브 다루기  (0) 2020.03.04
[React-Native] (1) React Native란 무엇인가?  (0) 2020.03.03
[React-Native] Redux  (0) 2020.03.02
[React Native] Weather App(2)  (0) 2020.02.28
0 Comments
댓글쓰기 폼