[RN] 🧶 RN 프로젝트를 Web으로 빌드하기

▷ react-native-web 사용법

react-native-web은 React Native의 컴포넌트를 웹 환경에 맞게 변환하여 웹 브라우저에서 직접 실행되도록 해준다.

React Native로 모바일 앱을 개발하다가 웹으로도 만들어보고 싶어서 사용해 봤다.

# 설치
yarn add react-dom react-native-web
yarn add url-loader
yarn add -D @types/react-dom

# webpack 설치
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/preset-react

---

이제 이 블로그 보고 기본 설정 해주면 됨

---

✚ 추가적인 설정

🧶 tailwindcss

# 아래 두개는 이미 설치 했었음
# yarn nativewind
# yarn add -D tailwindcss

yarn add -D postcss autoprefixer postcss-loader css-loader style-loader

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
    './public/**/*.{js,jsx,ts,tsx,html}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

src/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: rgb(233, 236, 239);
}
.root-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.root-wrapper {
  max-width: 540px;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

---

🧶 index.web.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '/App';
import './src/global.css'; // ⭐️ 추가

const rootNode = document.getElementById('root');
ReactDOM.createRoot(rootNode).render(<App />);

---

🧶 webpack.config.js

...
// css 파일 로더 추가
const cssLoader = {
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'postcss-loader'],
  include: path.resolve(__dirname, 'src'),
};
module.exports = {
  resolve: {
    ...
    extensions: ['.web.js', '.js', '.ts', '.tsx', 'json', '.css'],
  },
  module: {
    rules: [tsxLoader, imgLoader, svgLoader, cssLoader],
  },
  ...
};

---

🧶 babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset', '@babel/preset-react'],
  ...
}

---

🧶 package.json

"scripts": {
  "start:web": "webpack serve --config ./webpack.config.js --mode development",
  "build:web": "webpack --mode production",
  ...
},

---

🧶 웹으로 실행

yarn run start:web

---

🧶 경로 설정

웹과 모바일 환경에 따라 경로 설정을 다르게 해야 한다.
그렇지 않으면 웹에서는 경로가 변경되어도 URL이 업데이트되지 않는다.

react-router-dom은 브라우저 환경에서만 작동하므로 모바일 앱에서는 사용할 수 없다.
(모바일에서 사용하면 document 객체와 관련된 에러가 발생함)

# 설치
yarn add react-router-dom

App.tsx

/* App.tsx */
import React from 'react';
import {Platform} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

import HomeScreen from 'screens/HomeScreen';
import DetailMenuScreen from 'screens/DetailMenuScreen';

function App() {
  const Stack = createNativeStackNavigator();
  const isWeb = Platform.OS === 'web';

  return (
    <>
      {!isWeb && (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              options={{headerShown: false}}
              component={HomeScreen}
            />
            <Stack.Screen
              name="DetailMenu"
              options={{headerShown: false}}
              component={DetailMenuScreen}
            />
          </Stack.Navigator>
        </NavigationContainer>
      )}
      {isWeb && (
        <Router>
          <Routes>
            <Route path="/" element={<HomeScreen />} />
            <Route path="/menu/detail" element={<DetailMenuScreen />} />
          </Routes>
        </Router>
      )}
    </>
  );
}

export default App;

src/screen/HomeScreen.tsx

/* src/screen/HomeScreen.tsx */
import React from 'react';
import {Platform, Pressable, SafeAreaView, StatusBar, Text} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {useNavigate} from 'react-router-dom';

const HomeScreen = () => {
  const isWeb = Platform.OS === 'web';
  const navigate = isWeb ? useNavigate() : undefined;
  const navigation = isWeb
    ? undefined
    : useNavigation<NativeStackNavigationProp<any>>();

  const goToDetailMenu = () => {
    if (isWeb && navigate) {
      navigate('/menu/detail');
      return;
    }
    if (navigation) {
      navigation.navigate('DetailMenu');
    }
  };

  return (
    <SafeAreaView className="bg-white">
      <StatusBar barStyle={'light-content'} backgroundColor={'#fff'} />
      <Pressable
        onPress={goToDetailMenu}
        className="bg-green-300 p-4 text-green-900 m-10 border border-solid border-green-900 rounded">
        <Text>Home</Text>
      </Pressable>
    </SafeAreaView>
  );
};

export default HomeScreen;

훅으로 분리

hooks/useNavi.ts

import { Platform } from 'react-native';
import { useNavigate } from 'react-router-dom';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

const useNavi = () => {
  const isWeb = Platform.OS === 'web';

  const navigate = isWeb ? useNavigate() : undefined;
  const navigation = isWeb ? undefined : useNavigation<NativeStackNavigationProp<any>>();

  return {
    navigate, // 웹
    navigation, // 앱
  };
};

export default useNavi;