[React Native Web] 앱과 웹을 한번에 개발하기 - 2

 

1. IE 설정하기(IE를 신경쓰지않는다면 Skip)

Webpack5부터는 기본적으로 output bundle파일이 es6로 처리되기때문에 별도의 설정값을 추가해야합니다. 

output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
    environment: {
      arrowFunction: false,
      bigIntLiteral: false,
      const: false,
      destructuring: false,
      dynamicImport: false,
      forOf: false,
      module: false,
   },
 },

webpack.config.js에서 output부분을 위와같이 수정해준 후 ie에서도 'Hello world from react'가 노출되는지 확인합니다.

2.하나의 코드로 3개의 플랫폼에 화면 출력하기

이제 모든 플랫폼에 동일한 소스 사용을 위해 App.web.js를 삭제하고 App.js의 내용을 아래 내용으로 변경합니다.

import React from 'react';
import {Text, View, StyleSheet} from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello world from React Naitve Web</Text>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems:'center'
  },
});

export default App;

그리고 index.web.js에

import App from './App.web'

부분을 

import App from './App'

로 변경하여 Native App과 Web 모두 App.js를 불러오도록 합니다. 그리고 web을 실행하는 커맨드인

npm run start-react

를 실행하고, 터미널을 하나 더 연뒤 

ios만 준비되어있다면 

npm run ios

android만 준비되어있다면

npm run android

둘다 준비되어있다면

npm run ios && npm run android

 

web, android, ios 하나의 코드로!

*Web의 경우 body와 html의 display속성이 flex가 아니며 height가 화면의 100%가 아니므로 위와같이 출력되는게 정상입니다. 

 

3. React Native Component

reactnative.dev/docs/view < React Native의 컴포넌트 자세한 설명

 

React에서는 기존 HTML의 문법을 변환한 JSX로 큰 러닝커브없이 작업할 수 있었지만, React Native는 display속성이 기본적으로 flex이며, div나 span, a로 대부분의 레이아웃을 만들 수 있는 것과는 다르게 역할에 맞게 컴포넌트가 세분화 되어있습니다.

 

 - <View>

가장 많이 사용되는 컴포넌트이며, div와 유사합니다. 기본적으로 flexBox로(inline변환 가능), div와 같이 레이아웃을 만드는 

기본 구성요소입니다.

 

- <ScrollView>

Scroll이 필요한 레이아웃요소에 컨테이너로 사용되는 컴포넌트입니다. 가로스크롤 사용시 horizontal속성으로 사용가능합니다. 앱에서 터치하여 스크롤, 웹에서 마우스로 스크롤 시 이벤트 역시 제공합니다.

 

- <Text>

View만큼 많이 사용되는 컴포넌트로 inline요소입니다. 텍스트를 표시할때 주로 사용합니다.

 

- <Button>

HTML에서의 Button과는 다르게 title속성으로 버튼에 표시할 텍스트를 정하며, 굳이 style을 정의하지않아도 각 플랫폼별로 어느정도 모양이 잡혀있습니다. style로 font-size나 크기 등을 변경 할 수없으며, color속성으로 버튼 자체색을 정하는 것 외에는 따로 커스텀이 되지않습니다. 

 

- <TouchableOpacity>, <TouchableWithoutFeedback>

커스텀해야하는 버튼이나 영역을 만들고자할때 사용되는 컴포넌트들로 flex요소입니다.

TouchableOpacity는 터치 시 opacity가 0에서 1로 변하는 효과가있으며,

TouchableWithoutFeedback는 피드백없는 터치요소에 사용됩니다. 

 

위의 컴포넌트가 가장많이 사용되고 기본적인 컴포넌트입니다. 

 

다음 글에서는 위에서 사용된 컴포넌트들로 화면을 구성하고 추가적인 환경을 설정해보도록 하겠습니다.