들어가며
저는 React로 웹을 개발해오던 사람입니다. 최근 간단하게 앱을 만들 일이 있어서 알아보다가, 제가 쓰던 React와 가장 비슷한 React Native를 알게 되었습니다. 저는 이 두 개가 어떻게 다르며, 왜 나누었을까 하는 궁금증이 생겼습니다.
React
자바스크립트 컴포넌트 라이브러리인 React.js는 웹 사이트의 프론트엔드 제작을 위해 사용됩니다. 다른 프레임워크보다 더 각광받는 이유는 재사용 가능한 컴포넌트를 활용할 수 있기 때문이라고 생각합니다.
React는 React github를 보시면 알 수 있듯이 232000개의 star를 가지고 있고 현재도 계속 pr이 올라오는 것을 보실 수 있습니다.
React는 이때 사용한다
1️⃣SPA 를 개발할 때
SPA는 웹 서버에서 전체 HTML 화면을 받아오는 방식이 아니라, 로컬 PC에서 화면을 렌더링하는 방식입니다. 화면 전환 속도가 빠르고, 네이티브 앱처럼 보일 수 있는 장점이 있습니다. React의 가장 큰 특징인 컴포넌트와 Virtual Dom 구조는 SPA 동작에 적합하다고 볼 수 있습니다.
2️⃣소셜 미디어 사이트를 만들 때
소셜 미디어 사이트는 사용자의 동작이 매우 빠르게 처리됩니다. 리액트의 상태 관리를 통해 특정 컴포넌트를 업데이트 할 수 있어 리액트를 쓰기 좋습니다.
리액트의 장점에 대해서는 제가 이전에 썼던 내가 리액트를 사용하는 이유를 참고해주세요☺️
React Native
React Native는 크로스 플랫폼 앱으로 하나의 소스코드로 android, ios에서 똑같이 동작하는 앱을 말합니다. React를 기반으로 구축되었지만, 별도의 라이브러리를 사용합니다. 가장 큰 차이점은 React는 DOM을 조작하는 방식으로 UI을 업데이트하고, React Native는 js와 네이티브 모듈을 사용해 UI를 조작한다는 것입니다.
React Native github또한 12만개 star가 가지고 있으며 24년 10월 드디어 새로운 버전을 내며 지속적인 업데이트를 하고 있습니다.
React Native의 장점
1️⃣JS를 사용한다
JS를 사용하던 사람들에게 익숙하다는 장점이 있습니다. React 또한 js를 사용하기 때문에 React를 사용하던 개발자들은 비교적 수월할 수 있습니다.
2️⃣크로스 플랫폼이다
Window와 macOS 둘 다 호환되어 개발에 부담이 줄어듭니다. 이것은 언어가 아닌 서비스 환경을 얘기하는 것입니다.
어떻게 다른가
React와 React Native는 같은 라이브러리를 사용하지만 동작 과정은 다릅니다. React는 Virtual Dom을 사용하는 반면, RN은 Native 모듈로 동작합니다.
React의 Virtual DOM
React 컴포넌트는 Virtual DOM이라는 가상돔을 사용해 UI을 업데이트 합니다. 이전의 가상돔과 리렌더링된 후의 가상돔을 비교하여 바뀐 부분만 업데이트하는 방식인데요. 변경된 모든 Element를 집단화시켜 이를 한 번에 실제 DOM에 적용하는 Batch Update는 기존에 브라우저에 바로 화면을 그려주는 방법에 비해 매우 효율적으로 DOM을 조작하게 된 것입니다.
React Native의 Bridge
React Native에서는 Bridge로 Native 모듈이 호출됩니다. 다른 네이티브 앱과 다르게 자바스크립트 엔진에서 작동하기 때문에, Bridge를 통해 네이티브와의 통신에서 발생하는 성능 저하를 줄이기 위해 JS 스레드와 네이티브 스레드 간의 통신을 비동기 처리하는 최적화 방법을 사용합니다.
마치며
React와 React Native이 무엇인지와 언제 사용되는지에 대해 간단하게 정리해봤습니다. RN의 자세한 동작과정은 추후 강의를 들은 후에 한 번 더 정리해보고자 합니다.
참고
