React Native 시작하기

1. 리액트네이티브란?

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다.

안드로이드, IOS, 웹 , UWP 용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 합니다. 

 

리액트와 달리 웹브라우저가 아니라 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크입니다.

 

리액트 네이티브로 만든 다양한 어플리케이션은 https://reactnative.dev/showcase 사이트에서 확인할 수 있습니다.

대표적으로 페이스북, 인스타그램, 스카이프, 우버이츠, 바이두 등이 있습니다.

2. 리액트 네이티브 장점

리액트 네이티브의 강점은 IOS,안드로이드를 동시에 개발 할 수 있다는 점입니다.

또한 자바스크립트를 공부한 개발자(프론트엔드, 백엔드 개발자) 라면 쉽게 개발할 수 있다는 장점이 있습니다.

자바스크립트를 배우지 않았더라도, 다른 하이브리드앱에 비해 진입장벽이 낮아 빠르게 학습 가능하다는 장점이 있습니다.

 

만약, 리액트를 사용하던 개발자라면 약간의 수정을 통해 기존의 리액트 소스를 재사용할 수 있습니다. 

 

3. 리액트 네이티브 단점

네이티브앱을 동시에 만들 수 있지만, 네이티브에서 사용할 수 있었던 API를 지원받는데 오래 걸린다는 단점이 있습니다. 물론 기본적인 네이티브 기능은 있지만, 신규 기능이 등장할 경우 지원받는 시간이 걸릴 수 있습니다.

 

두번째는 잦은 업데이트입니다. 업데이트시 수정되는 기능이 생기면서  버그가 발생할 수 있습니다. 

또한, 리액트가 버전이 변경될 경우 리액트 네이티브 역시 큰 변화가 발생할 수 있습니다.

 

4. 브릿지

리액트 네이티브가 자바스크립트 코드를 이용해 네이티브 코드로 변경될 수 있도록 하는 것이 바로 브릿지입니다.

 

리액트 네이티브( 자바스크립트 )가 구동되는 자바스크립트 스레드(Javascript Thread) 는 네이티브 브릿지를 통해

네이티브 스레드 ( Native Thread )와 통신하면서 기존의 하이브리드 웹앱과는 다르게 성능을 최적화 시켰습니다.

또한 리액트( React.js ) 개발 생태계를 그대로 계승하고 있기 때문에 웹, 앱을 같은 구조로 개발이 가능합니다.

 

브릿지는 자바스크립트 스레드에서 정보를 받아 네이티브로 전달합니다. 네이티브 영역에는 UI를 담당하는 메인스레드와 레이아웃을 계산하는데 사용하는 백그라운드 스레드인 섀도 스레드가 있습니다. 그외에 네이티브 모듈도 존재하며 이 모듈에는 각각 자체 스레드가 있습니다. 리액트 네이티브에서는 각 디바이스와 통신하는 모든 자바스크립트의 기능을 분리된 스레드로 처리하면서 성능을 향상시킬 수 있습니다.

 

5. 가상 DOM

리액티브는 소스 수정시 자동으로 변동 되는 기능 패스트 리프레쉬 기능을 제공합니다. 이 패스트 리프레쉬가 동작할 수 있도록 화면을 자동으로 다시 그리는 기능을 돕는것이 바로 가상 DOM입니다. 

 

동작 과정은 다음과 같습니다.

데이터 수정 -> 변경된 데이터를 이용하여 가상DOM 그리기

-> 가상 DOM과 우리가 보고 있는 화면에 나타나는 DOM인 실제 DOM과 차이점 비교

-> 차이점이 발생한 부분을 실제 DOM에 그리기

 

6.JSX

JSX는 JavaScript XML의 약자로 자바스크립트 확장문법입니다. 이 JSX를 리액트에서 많이 사용하고 있습니다.

JSX로 코드를 작성한 후 바벨(https://babeljs.io/docs/en/)을 사용하여 자바스크립트로 변환합니다. 

 

JSX 예시

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

지금까지 리액트 네이티브에 대해 알아봤습니다.

 

위 작성한 글들은 가볍게 읽어보고 리액트 네이티브에 대해서 어떤것인지만 파악하는 것을 추천합니다.

 

다음에는 리액트 네이티브를 설치하고 프로젝트를 생성하는 글을 포스트하도록 하겠습니다.

 

감사합니다.