솜이의 데브로그

리액트 네이티브란? 본문

dev/React native

리액트 네이티브란?

somsoming 2021. 10. 7. 23:13

Reference : 처음배우는 리액트 네이티브

 

React Native란

iOS와 안드로이드에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크.

 

 

장점

  • 리액트 네이티브의 가장 큰 장점은 작성된 코드 대부분 플랫폼 간 공유가 가능해서 두 플랫폼을 동시에 개발할 수 있다는 것이다.
  • 작성된 구성 요소들이 재사용 가능하다
  • 변경된 코드를 저장하기만해도 변경된 내용이 적용된 화면을 확인할 수 있는 패스트 리프레쉬 기능을 제공해 즉각적인 수정 내용 확인이 가능하다.
  • 작성된 코드에 따라 각 플랫폼에서 그에 알맞은 네이티브 엘리먼트로 전환되기 때문에 큰 성능 저하 없이 개발이 가능하다.

 

단점

  • 네이티브의 새로운 기능을 사용하는데 오래 걸린다.
  • 유지보수의 어려움.
  • 잦은 업데이트

 

 

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

브릿지

  • 리액트 네이티브에는 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할을 하는 브릿지가 있다.
  • 브릿지는 자바스크립트 thread에서 정보를 받아 네이티브로 전달한다.
  • 리액트 네이티브에서는 기기와 통신하는 모든 자바스크립트의 기능을 분리된 스레드로 처리하면서 성능 향상을 가져온다.

 

가상 DOM

  • 데이터가 변할 경우 자동으로 화면을 다시 그리는 리액트의 가상 DOM에 대한 이해.
  • 데이터가 변했을 때 화면이 다시 그려지는 과정
    1. 데이터에 변화
    2. 변화된 데이터를 이용해 가상 DOM을 그린다.
    3. 가상 DOM과 실제 DOM을 비교해 차이점을 확인한다.
    4. 차이점이 있는 부분만 실제 DOM에 적용하여 그린다.
  • 여기서 실제 DOM은 우리가 보는 화면에 나타나는 DOM, 가상 DOM은 화면에 보이지 않지만 비교를 위해 존재하는 DOM.

 

JSX

  • JSX 자바스크립트 확장 문법으로 XML과 매우 유사하다.
  • 자바스크립트 코드 안의 UI 작업을 할 때 가독성에 도움을 주는 등 여러가지 장점이 있으며 리액트에서 많이 사용한다.
  • 오류 검사에도 장점.