[React Native] 처음 배우는 리액트 네이티브 1장

나경·2025년 1월 15일

리액트 네이티브란?

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

현재 리액트 네이티브로 개발된 애플리케이션으로는 페이스북, 인스타그램, 핀터레스트, 월마트 등이 있다

여기서 네이티브란 모바일 애플리케이션을 개발할 때 안드로이드나 iOS와 같은 특정 플랫폼에 직접적으로 접근해서 개발하는 것을 의미한다

리액트 네이티브의 장단점

장점

  • iOS와 안드로이드 두 플랫폼을 동시에 개발할 수 있다
  • 모바일 개발에 대한 지식 없이 자바스크립트만 알면 쉽게 시작할 수 있다
  • 코드 재사용이 가능하다
  • 패스트 리프레쉬 기능을 제공하기 떄문에 수정된 내용을 새로 고침하지 않아도 바로 화면에 적용된다

단점

  • 안드로이드와 iOS에서 새로운 API를 제공하면 리액트 네이티브가 이를 지원하기까지 시간이 걸린다
  • 업데이트가 잦다
  • 리액트의 버전 변화가 리액트 네이티브에 영향을 줄 수 있다

동작 방식

브릿지

브릿지는 자바스크립트 스레드에서 정보를 받아서 네이티브로 전달한다

자바스크립트는 자바스크립트 스레드로 구성되어 있고, 네이티브는 메인 스레드, 섀도 스레드, 네이티브 모듈로 구성되어 있다

  • 자바스크립트 스레드: 자바스크립트 코드가 실행되는 장소이고 보통 리액트 코드로 구성
  • 메인 스레드: UI를 담당
  • 섀도 스레드: 레이아웃을 계산하는 데 사용
  • 네이티브 모듈: 각 모듈에 자체 스레드가 존재

가상 DOM

실제 DOM은 우리가 보는 화면에 나타나는 DOM, 가상 DOM은 화면에 나타나지 않고 비교를 위해 존재하는 DOM이다

데이터에 변화가 생기면 가상 DOM을 그린 후, 가상 DOM과 실제 DOM을 비교해서 차이가 있는 부분만 실제 DOM에 적용한다

JSX

자바스크립트 확장 문법이다 자바스크립트 코드 안에 UI 작업을 할 때 도움을 주는 장점이 있다


참고
처음 배우는 리액트 네이티브

0개의 댓글