1장 리액트 네이티브란?

리액트 네이티브(React Native)

: 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트로, 사용자 인터페이스를 만드는 리액트에 기반을 두고 제작,

리액트와 달리 웹 브라우저가 아닌, iOS와 안드로이드에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크

 

1.1 리액트 네이티브의 장점과 단점

장점

• 작성된 코드 대부분 플랫폼 간 공유가 가능해서 두 플랫폼(iOS, 안드로이드)을 동시에 개발 가능
• 모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작 가능하며, 작성된 구성 요소들이 재사용 가능
• 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 패스트 리프레쉬 기능 제공
• 기존 크로스 플랫폼 프레임워크(코도바, 아이오닉 등)와 달리 네이티브 엘리먼트를 사용하여 성능 저하 없이 개발 가능
• 활발한 커뮤니티와 오픈소스 생태계를 통해 다양한 플러그인과 라이브러리 지원

단점

• 안드로이드와 iOS의 새로운 API를 지원하기까지 시간이 걸리는 경우가 있음
• 플랫폼 간 코드 충돌이나 문제 해결 시 디버깅이 어렵고 시간이 많이 소요될 수 있음
• 잦은 업데이트로 기존 프로젝트와의 호환성 유지가 어려운 경우가 발생
• 리액트 네이티브 자체 크기 및 의존성으로 인해 애플리케이션 크기가 커질 가능성이 있음
• 네이티브 코드 작성이 필요한 복잡한 기능 구현 시 추가 작업이 필요

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

브릿지(Bridge)

자바스크립트 코드를 네이티브 코드로 변환하는 중간 연결 역할
자바스크립트 스레드에서 정보를 받아 네이티브 계층으로 전달하며, 네이티브 컴포넌트에서 처리된 결과를 다시 자바스크립트로 전달
이 방식을 통해 네이티브 수준의 UI 성능을 제공

가상 DOM

리액트 네이티브는 데이터 변경 시 가상 DOM을 사용해 효율적으로 화면을 다시 그리는 방식
변경된 데이터로 가상 DOM을 생성하고, 실제 DOM과 비교해 차이점만 업데이트
이를 통해 성능 최적화와 빠른 반응 속도 구현

JSX

리액트에서 사용하는 자바스크립트 확장 문법으로 XML과 유사
UI를 구성하는 코드를 작성할 때 가독성을 높이고 오류를 사전에 감지 가능
작성된 JSX 코드는 바벨(Babel)을 통해 자바스크립트로 변환