W-02. React Native 프로젝트에서 Web빌드하기
개요
최근에 react-native(이하 RN) 프로젝트에서 동일한 코드로 웹에서도 지원이 가능한지에 대한 실험을 할 기회가 있었다. 이전에 expo-relay-boilerplate 개발을 했을 때 웹을 썼던터라 당연히 RN CLI에서도 지원하고 있을 것이라고 생각했다.
하지만 RN에서는 웹을 위한 랜더 기능은 지원하지 않는다. 당연히 웹을 랜더하는 기능이 있을 것이라고 생각했지만 CLI를 뒤져봐도 웹을 위한 기능은 없고, 스크립트 또한 찾아볼 수 없었다.
RN에서는 모바일 네이티브 플랫폼 별 어플리케이션에 랜더할 수 있도록 View, Text, Image, ScrollView와 같은 추상화된 컴포넌트를 제공한다. 여기에서 웹에 랜더를 하기 위해선 외부 라이브러리의 도움을 받아야한다. 바로 react-native-web 이다.
React Native Web는 React DOM과 React Native 간의 호환성 레이어입니다. 신규 및 기존 앱, 웹 전용 및 다중 플랫폼 앱에서 사용할 수 있습니다.
소개에서도 나와있듯 RN의 핵심 컴포넌트들을 React DOM에 랜더할 수 있도록 호환을 돕는 라이브러리이다. 이 라이브러리를 적용하고, webpack을 통해 빌드 설정을 조금 해주면 RN에서 작성했던 코드를 몽땅 웹에 그릴 수 있을지도…?
이런 분들이 읽으면 좋을 것 같다
- 기존에 react-native를 통해 모바일 앱을 개발하면서 모바일 웹이 필요한 사람
- 내가 만드는 앱이 웹으로도 나올 수 있구나 싶은 호기심을 가진 사람
시작해봅시다
💡 이미 앱을 가지고 계신 분들은 4번부터 읽으시면 편해요
1. 환경정보
- node 14.18.1
- yarn
- react 18.0.0
- react-native 0.69.3
- react-native-web 0.17.7
2. RN 앱 준비
# 타입스크립트 템플릿의 앱으로 시작
npx react-native init RnWebApp --template react-native-template-typescript
3. iOS 빌드
# iOS pod install
npx pod-install ios# iOS build
yarn ios
4. 웹으로 변환
여기서부터 이번 글의 본론이 되겠습니다.
개요에서도 말했듯, RN 자체에는 웹에 랜더할 수 있는 방법이 없다. 그렇기에 react-native-web의 도움을 받아 React-DOM에 랜더하기로 한다.
yarn add react-dom react-native-web
yarn add -D @types/react-dom그 다음은 웹이 그려질 수 있도록 세팅해주자.
다음으로 webpack으로 이 파일들을 번들링 해야한다.
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/preset-react
설정을 마치고 스크립트를 돌려보자
yarn run start:web
Write Once, Run Anywhere
위에서 보다시피 골치아픈 세팅을 한 번만 하게 되면 Android, iOS, Web 에서 모두 동일한 모습의 어플리케이션을 제공할 수 있다. 물론 어플리케이션의 사이즈가 커질 수록 그 만큼 상이한 부분에 대한 이슈가 많아지겠지만 모바일 웹을 대응해야하는 앱 개발자들에게는 이만한 방법이 따로 없다.
또한 페이지를 라우팅 하는 부분에서도 react-navigation은 웹까지도 지원하고 있기 때문에, 모바일에서는 react-navigation, 웹에서는 react-router 를 사용하면서 가뜩이나 많은 일에 인터페이스 차이로 골치가 아프다면 좋은 해결책이 될 것이다.
모든 것을 공유하는 사이
더 나아가서 또 다른 웹 어플리케이션을 만든다고 가정했을 때, 아마도 더 강력한 힘을 발휘하게 될 것이다. 모노레포 방식으로 개발한 컴포넌트를 플랫폼의 제약없이 사용할 수 있게되면, A라는 모바일 앱과 B라는 웹 앱 사이에서도 컴포넌트를 공유할 수 있게 된다.
모노레포 방식의 프로젝트에서 주로 유틸리티 함수 혹은 훅(hook)은 공유하지만 UI는 개별적으로 만드는 경우가 많다. 이 과정에서 모바일과 웹의 theme 이 미묘하게 달라지는 경우가 발생할 수 있다. 하지만 react-native-web을 도입하면 UI까지도 모두 공유할 수 있기 떄문에 갓성비를 이뤄낼 수 있다.
native-base
이미 많은 사람들이 이에 대해서 고민을 해왔고, 그 결과 native-base 라는 UI 라이브러리가 계속해서 업데이트 되고 있다. native-base는 자신있게 소개하고 있다.
Universal Components for React & React Native
이미 모든 플랫폼에 적합하도록 검증된 라이브러리를 쓴다면 골치 아픈 여러 버그와 호환성 부분에서도 많은 부분을 해결해줄 수 있을 것으로 기대한다. 그것 외에도 굉장히 좋은 컨셉으로 컴포넌트들이 디자인 되어있고, SSR까지도 지원한다니?? 꼭 한 번 사용해보시길…
샘플 코드
이번 글에서 예시로 사용된 코드는 react-native-web-sample에 업로드 해두었다. 도움이 되었다면 좋아요, 구독…