들어가는 말
이번 시간에는 리액트 네이티브를 처음 사용해보면서 리액트와 어떤 차이점과 공통점이 있는지 정리해 보는 시간을 가져볼까 합니다.
리액트 네이티브는 말로는 리액트와 유사하다, 리액트 JSX 로 앱을 개발할 수 있다 등등은 접해봤지만, 실제 사용해본 경험은 없었기에 크게 와닿지는 않았는데, 이번에 직접 사용해보면서 느낀 것들을 정리해보면 좋을 듯하여 이 시간을 마련해 보았습니다.
리액트 네이티브와 리액트
우선 리액트와 리액트 네이티브가 각각 무엇인지 언급하고 시작할까 합니다.
리액트 네이티브
리액트 네이티브는 JavaScript와 React를 사용해 네이티브 모바일 애플리케이션을 개발하는 프레임워크입니다. 컴포넌트 기반 아키텍처와 JSX를 사용하여 UI를 구성하며, 네이티브 UI 컴포넌트와 브리지를 통해 네이티브 기능에 접근합니다. 코드 재사용성을 높이고, 플랫폼 간 호환성을 제공하여 iOS와 Android 앱을 동시에 개발할 수 있습니다. 비동기 처리, 상태 관리(Context API, Redux, MobX)를 지원하며, 다양한 디버깅 도구와 핫 리로딩 기능을 제공합니다. 접근성, 반응형 디자인을 통해 사용자 경험을 개선합니다.
| 리액트 네이티브의 핵심 개념 중 하나는 자바스크립트 코드와 네이티브 모듈 간에 브리지를 통해 연결된다는 점입니다. 보통 네이티브 API 는 안드로이드의 자바, IOS 의 스위프트 에서 사용되는 네티이브 모듈을 호출하는데 사용됩니다. 예를 들어, 리액트 네이티브의 <Text/> 컴포넌트가 호출되면, 브리지를 통해 네이티브 플랫폼으로 해당 호출 명령이 전달되고, 네이티브 측에서는 UILabel (iOS) 또는 TextView (Android)를 사용하여 응답함으로서 텍스트를 화면에 표시할 수 있게 됩니다. 당연하게도 이러한 추상화를 통한 접근은 결국 앱의 성능을 저하하는 요인이 되기 때문에, 성능을 고려한다면, 직접적으로 하드웨어 및 소프트웨어 자원에 접근할 수 있는 네이티브 언어를 통해 앱 구축하는 것이 선호되는 이유이기도 합니다. |
리액트
리액트는 JavaScript 라이브러리로, 컴포넌트 기반 아키텍처를 통해 웹 UI를 구축합니다. JSX를 사용하여 UI를 정의하고, 단방향 데이터 흐름과 상태 관리를 통해 애플리케이션을 구성합니다. 상태 관리는 useState, useReducer와 같은 훅을 통해 처리하며, 컴포넌트의 재사용성을 높입니다. React Router를 통해 페이지 간 네비게이션을 관리하고, 개발 도구와 테스트 도구(Jest, React Testing Library)를 활용하여 디버깅과 테스트를 지원합니다. 반응형 디자인을 지원하며, 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)도 가능합니다.
리액트 VS 리액트 네티이브
앞서 간략한 개념 설명만 봐도, 리액트와 리액트 네이티브는 동일한 개발 철학을 기반으로 작성된 도구임을 알 수 있습니다.
그럼, 개념 상으로는 유사해보는 두 친구는 어떤 공통점과 차이점이 있을지 보다 자세하게 표로 살펴보도록 합시다.
| 플랫폼 | 웹 브라우저 | 모바일 (iOS 및 Android) |
| 렌더링 | HTML로 렌더링 | 네이티브 UI 컴포넌트로 렌더링 |
| 스타일링 | CSS 또는 CSS-in-JS 라이브러리 (예: styled-components) | StyleSheet 객체, Flexbox 사용 |
| UI 컴포넌트 | <div>, <span>, <button> 등 HTML 태그 사용 | <View>, <Text>, <Image> 등 네이티브 컴포넌트 사용 |
| 네이티브 기능 | 브라우저 API를 사용 (예: fetch) | 네이티브 모듈을 통해 네이티브 API와 상호작용 |
| 상태 관리 | useState, useReducer, Context API 등 사용 | 동일하게 useState, useReducer, Context API 등 사용 |
| 네비게이션 | React Router 사용 | React Navigation 또는 React Native Navigation 사용 |
| 개발 도구 | Chrome DevTools, React Developer Tools | React Native Debugger, Flipper |
| 코드 재사용 | 웹 애플리케이션 코드 재사용 가능 | iOS와 Android 앱을 위한 코드 재사용 가능 |
| 비동기 작업 | fetch, axios 등 사용 | 동일하게 fetch, axios 등 사용 |
| 디버깅 | 브라우저 개발자 도구 | React Native Debugger, Xcode, Android Studio |
플랫폼
리액트 (React)
웹 브라우저에서 실행되는 애플리케이션을 개발합니다. HTML, CSS, JavaScript를 사용하여 웹 페이지를 구성하고 렌더링합니다.
리액트 네이티브 (React Native)
iOS와 Android 모바일 플랫폼에서 실행되는 네이티브 애플리케이션을 개발합니다. 네이티브 모바일 환경에 맞는 UI와 기능을 제공합니다.
렌더링
리액트 (React)
웹 애플리케이션을 위해 HTML로 렌더링합니다. 브라우저가 HTML 요소를 해석하고 화면에 표시합니다.
리액트 네이티브 (React Native)
JavaScript 코드에서 네이티브 모바일 컴포넌트로 변환하여 렌더링합니다. 실제 네이티브 UI 요소로 변환되어 모바일 장치에서 렌더링됩니다.
스타일링
리액트 (React)
CSS 파일을 사용하여 스타일을 정의합니다. CSS-in-JS 라이브러리(예: styled-components, emotion)를 통해 JavaScript 코드 내에서 스타일을 정의할 수 있습니다.
리액트 네이티브 (React Native)
StyleSheet 객체를 사용하여 스타일을 정의합니다. 스타일은 JavaScript 객체로 정의되며, flexbox를 사용한 레이아웃 시스템이 적용됩니다. CSS의 단위나 속성(예: height: 100vh)은 사용되지 않습니다. 따라서 flex:1 과 같이 flexbox 속성을 대신 사용합니다.
참고로, 리액트 네이티브 내에서도 tailwindcss 를 사용할 수 있는 확장 패키지가 존재 합니다.
UI 컴포넌트
리액트 (React)
HTML 태그를 사용하여 UI를 구성합니다. 예를 들어, <div>, <span>, <button>, <input> 등을 사용합니다.
리액트 네이티브 (React Native)
네이티브 모바일 UI 컴포넌트를 사용하여 UI를 구성합니다. 예를 들어, <View>, <Text>, <Image>, <ScrollView>, <TouchableOpacity> 등을 사용합니다.
네이티브 기능
리액트 (React)
웹 브라우저 API를 사용하여 기능에 접근합니다. 예를 들어, fetch API를 사용하여 HTTP 요청을 보낼 수 있습니다.
리액트 네이티브 (React Native)
네이티브 모듈을 사용하여 모바일 장치의 네이티브 기능에 접근합니다. 예를 들어, 카메라, 위치 서비스, 로컬 저장소 등에 접근할 수 있습니다.
상태 관리
리액트 (React)
useState, useReducer 훅을 사용하여 컴포넌트의 상태를 관리합니다. Context API를 통해 전역 상태를 관리할 수 있습니다.
리액트 네이티브 (React Native)
동일하게 useState, useReducer 훅을 사용하여 상태를 관리합니다. Context API, Redux, MobX와 같은 상태 관리 라이브러리를 사용하여 복잡한 상태를 관리할 수 있습니다.
네비게이션
리액트 (React)
React Router와 같은 라이브러리를 사용하여 페이지 간의 네비게이션을 처리합니다. URL 기반 라우팅을 사용합니다.
리액트 네이티브 (React Native)
React Navigation, React Native Navigation과 같은 라이브러리를 사용하여 화면 간 네비게이션을 처리합니다. 스택 네비게이션, 탭 네비게이션 등을 지원합니다.
개발 도구/디버깅
리액트 (React)
Chrome DevTools, React Developer Tools와 같은 브라우저 개발자 도구를 사용하여 디버깅을 진행합니다.
리액트 네이티브 (React Native)
React Native Debugger, Flipper와 같은 디버깅 도구를 사용합니다. Xcode (iOS)와 Android Studio (Android)를 사용하여 네이티브 환경에서의 디버깅과 성능 분석을 수행합니다.
코드 재사용
리액트 (React)
웹 애플리케이션의 코드베이스를 재사용할 수 있습니다. React 컴포넌트와 훅을 사용하여 효율적으로 웹 애플리케이션을 구축합니다.
리액트 네이티브 (React Native)
하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있습니다. 플랫폼 별 코드나 네이티브 모듈을 사용하여 플랫폼 특화 기능을 구현할 수 있습니다.
비동기 작업
리액트 (React)
비동기 작업을 위해 fetch, axios와 같은 라이브러리를 사용하여 서버와의 통신을 처리합니다.
리액트 네이티브 (React Native)
동일하게 fetch, axios와 같은 라이브러리를 사용하여 비동기 작업을 처리합니다.
나가는 말
오늘은 간단하게 리액트와 리액트 네이티브에 대해서 정리하는 시간을 가져보았습니다. 리액트 JSX 문법을 사용해서 모바일 앱을 만들어 볼 수 있다는 것은 분명 큰 장점이지만, 그만큼 추상화된 방식으로 인해 앱의 성능이 떨어질 수 밖에 없다는 사실을 알 수 있었습니다.
이 글이 처음 입문하는 분들에게 도움이 되길 바라며 이만 글을 줄여봅니다.
참고하면 좋은 자료
리액트 공식문서 : https://ko.react.dev/
리액트 네이티브 공식 문서: https://reactnative.dev/