차근차근

0. 지리적 위치 정보 이용하기 모바일 앱에서 사용자의 위치를 안다는 것은 매우 중요하다. 리액트 네이티브는 지리적 위치 추적(geolocation) 기능을 기본적으로 제공한다. 이 기능은 플랫폼에 상관없이 동일하게 사용할 수 있다. 사용자 위치 얻어오기 사용자 위치를 얻어올 때는 navigator.geolocation을 호출하면 된다. getCurrentPosition은 성공 콜백(success callback), 에러 콜백(error callback), getOptions 이렇게 3개의 인자를 받는다. 성공 콜백만 필수 인자이다. 성공 콜백으로 전달되는 position 객체에는 좌표와 타임스탬프(time stamp)가 들어 있다. getOptions는 객체로서 timeout, enableHighAcc..

0. 스타일의 선언과 조작 리액트 네이티브는 모든 스타일이 자바스크립트 안에 존재하고 명시적으로 컴포넌트에 스타일 객체를 연결해야 한다. 리액트 네이티브에서는 스타일시트 대신에 자바스크립 기반의 스타일 객체를 사용한다. 먼저, 인라인 스타일을 사용할 수 있다. 인라인 스타일이 최선의 방법은 아니지만 문법적으로는 가장 간단하게 리액트 네이티브의 컴포넌트에 스타일을 적용하는 방법이다. 약식으로 간단히 스타일에 변화를 줄 때 쓴다. 많이 쓰는 방식은 StyleSheet.create방식이다. 반복적인 객체 할당을 줄여 성능적인 이점이 있다. 코드를 명확하게 구조화할 수도 있다. 한번 생성된 스타일은 변경할 수 없다(immutable). 두 개 이상의 스타일을 합치고 싶을 때 어떻게 해야 할까? style속성은 ..

0. HTML 엘리먼트와 네이티브 컴포넌트의 유사성 리액트 네이티브에서는 HTML 엘리먼트를 사용하지 않고, 이와 매우 유사하면서 다양한 컴포넌트를 사용한다. HTML 리액트 네이티브 div img span, p ul/ol, li , 자식 아이템 이 엘리먼트들은 비록 서로를 대체할 수는 없지만 아주 비슷한 용도로 쓰인다. 1. 컴포넌트 텍스트 렌더링은 매우 기본적인 기능이다. HTML에서는 다양한 엘리먼트(, 등)로 텍스트를 표시할 수 있다. 리액트 네이티브에서는 컴포넌트만이 플레인 텍스트 노드를 자식으로 가질 수 있다. 리액트 네이티브에서 컴포넌트를 다룰 때는 , 같은 하위 태그를 사용할 수 없으나 fontWeight, fontStyle 속성을 이용하여 비슷한 효과를 낼 수 있다. 리액트 네이티브에서 ..

0. 환경설정 리액트 네이티브 개발 환경 설정 방법은 크게 두 가지로 나눌 수 있다. 하나, 매우 빠르고 쉽게 설정이 가능한 Create React Native App이라는 도구를 사용하는 방법이다. 둘, 아주 전형적인 방법으로 리액트 네이티브와 그 dependency까지 모두 설치하게 되는 방법이다. 1. 개발 환경 설정: Create React Native App Create React Native App은 Xcode나 안드로이드 스튜디오를 설치할 필요 없이 리액트 네이티브 앱을 생성하고 실행할 수 있게 해주는 커맨드 라인 도구이다. npm을 이용하여 create-react-native-app 패키지를 설치한다. 리액트 네이티브는 npm을 이용하여 dependency를 설치한다. npm install..

0. 리액트 네이티브는 어떻게 동작할까? 리액트에서 가상(Virtual) DOM은 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어에 해당한다. 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서는 반드시 브라우저의 DOM을 수정해야한다. 이는 값비싼 동작으로, 과도한 DOM수정은 심각한 성능 저하를 유발한다. 그러나!! 리액트는 페이지의 변화를 바로 렌더링하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링한다. 브라우저의 DOM으로 렌더링하는 대신에 리액트 네이티브는 objective-C API를 호출하여 iOS 컴포넌트로 렌더링하고, 자바 API를 호출하여 안드로이드 컴포넌트를..

Learning React Native, 2nd Edition, by Bonnie Eisenman 정리 0. React Native란 무엇인가? 리액트 네이티브는 iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크이다. 리액트 네이티브는 사용자 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있다. 브라우저가 아닌 모바일이 타깃. 1. 리액트 네이티브의 이점 대상 플랫폼의 표준 렌더링 API를 사용한다. 작성한 마크업을 플랫폼에 따라 그에 상응하는 진짜 네이티브 엘리먼트로 전환한다. 게다가 리액트는 메인 UI스레드와 분리되어 실행되기에 앱의 역량을 줄이지 않아도 앱은 빠른 성능을 유지할 수 있다. props나 state가 변경될 때 리액트 네이..