React-Native 작동원리와 WebView, 기본 태그 및 Styled Component

React-Native 작동원리

React Native의 작동원리를 이해하기 위해서 몇 가지 알아야할 것이 있습니다.

React Native앱은 크게 두 가지 부분으로 구성되어 있는데요 Native부분과 JS 부분입니다.

Native 부분은 Android/iOS Device(Java/Objective-C)가 담당하는 부분으로 UI를 렌더합니다.

JS 부분은 React 관련 코드가 실행되는 스레드입니다.

Native Bridge

Main Thread와 JS Thread는 Native Bridge를 통해 소통합니다.

클라이언트-서버가 통신하는 것과 비슷한데, 각 부분에서 전달되는 정보가 JSON object 형태로 변환되어 전달됩니다.

이 부분에서 전달되는 양이 많아지면 병목현상이 생기면서 앱이 느려지겠죠?
좋은 성능의 React Native 앱을 위해서는 Native Bridge를 통하는 횟수를 최소한으로 만들어주시면 좋겠습니다.

JS Thread

React Native 앱을 실행하기 위해 webpack과 비슷하게 JS 코드를 하나의 파일로 번들링해줍니다. 번들링된 JS 코드를 JS Thread가 실행하여 이벤트 루프가 끝날 때마다 메인 스레드에 어떤 뷰를 표시할 건지에 대한 정보를 전달합니다.

Main Thread

Matin Thread는 앱이 실행되자마자 시작됩니다. 앱을 로드하고 JS Thread를 실행하는 것도 Main Thread 입니다. JS Thread가 Native Bridge를 통해서 보내오는 정보들을 해석해서 UI에 그려줍니다.
반대로 사용자들의 동작(이벤트)를 받아 Native Bridge를 통해 JS Thread로 넘겨주는 역할도 하곘죠?

결론적으로 React Native 앱을 실행하면 Main Thread(UI Thread)가 JS Thread를 ****실행시켜 자바스크립트로 코드를 번들링합니다.

또한 JS Thread가 실행되면서 React는 V-DOM을 생성해서 변경사항을 Native Bridge를 경유하여 Main Thread로 전달합니다.

정보를 전달받은 Main Thread는 화면에서 UI를 표시하고 UI 화면에서 이벤트가 발생하면 이것이 다시 Native Bridge를 통하여 JS Thread로 전달되는 일련의 과정이 반복됩니다.

그러다 보니 기기 자체에서 바로 실행되는 코틀린이나 스위프트에 비해 느릴 수 밖에 없습니다.

때문에 3D 그래픽이나 게임 앱을 만들게 되면 속도가 중요하기 때문에 리액트 네이티브를 사용하기엔 조금 힘들겠죠? 하지만 이외의 서비스는 크게 차이가 나지 않기때문에 Android나 iOS를 한 번에 개발하실 수 있는 React Native를 통해 개발하시는 것이 효율적이겠습니다.

WebView

react-native-webview 설치링크

react-native-webview 설치 명령어 입니다.

yarn add react-native-webview

App.tsx에서 WebView를 import하고 내 프로젝트 도메인주소를 uri에 입력해줍니다.

import { WebView } from 'react-native-webview';

const App: ()=> Node =()=> {
    return <WebView source={{uri: 'https://codecamp-deploy.com'}} />;
};

export default App;

그리고 expo를 실행해주시면 우리가 만든 포트폴리오를 앱으로도 실행해볼 수 있겠습니다!

---

React-Native 기본 태그 소개

React-Native 프로젝트에서는 기존의 React 프로젝트 방식과는 다르게

Tag에 직접적으로 Class 또는 ID 를 부여할 수 없습니다.

그래서 React-Native 자체에서 제공하고 있는 Tag 들만 사용할 수 있는데

기본적으로 어떠한 태그들을 제공하고 있는지 알아보겠습니다.

View

View 태그는 div 태그와 동일하게 Block 요소로 일정한 크기의 구역을 표시합니다.
하지만 View 안에 문자를 넣어주실 수 없으므로 문자를 넣어주실 경우에는 Text 태그를 사용해주어야합니다.

ScrollView

import { ScrollView } from 'react-native'

return(
    <ScrollView>

    </ScrollView>
)

ScrollView 태그는 디바이스 높이보다 컨텐츠가 많아질 경우 아래로 스크롤하여 볼 수 있도록 해주는 block 태그 입니다.

Text

import { Text } from 'react-native'

return(
    <Text>이 곳에는 Text를 입력할 수 있습니다.</Text>
)

Text 태그는 Text가 입력되는 span태그라고 생각하시면 됩니다.

TextInput

import { TextInput } from 'react-native'

const onChangeInput =(event)=>{
    console.log(event.nativeEvent.text)
}

return(
    <TextInput onChange={onChangeInput}/>
)

TextInput 태그는 Text를 입력받는 input태그라고 생각하시면 됩니다. 기존의 input 태그처럼 onChange 이벤트를 받을 수 있으나 value를 받아오실 때 event.target이 아닌 event.nativeEvent.text로 받아오실 수 있습니다.

Image

import { Image } from 'react-native'

return(
    <Image source={require('../public/images/codecamp.png')}
    <Image source={uri: 'https://reactnative.dev/img/codecamp.png'}
)

react native에서는 이미지를 적용해주실 때 조금 다릅니다.
Image 태그를 사용해주게 되는데 이 때 이미지 주소는 source로 받아오시고 프로젝트 내 로컬 이미지일 경우
require로 지정해주시고 브라우저에서 이미지 주소를 받아오실 때는 uri로 지정해주시면 됩니다.

주의 하셔야할 점은, Image 태그에 width/height 값을 지정해주지 않으실 경우 올바른 이미지 경로를 입력해주셨더라도 이미지가 출력되지 않을 수 있습니다! 주의해주세요!

TouchableOpacity / Pressable

import { TouchableOpacity, Pressable } from 'react-native'

const onPressFuction=()=>{
 ...
}

return(
    <TouchableOpacity onPress={onPressFuction}><Text>Press Here</Text></TouchableOpacity>
    <Pressable onPress={onPressFuction}><Text>Press Here</Text></Pressable>
)

지금까지는 onClick 이벤트를 이용해서 웹 프로젝트를 진행했다면 앱 프로젝트에서는 onPress 이벤트를 사용하게 됩니다. onPress 이벤트를 지원하는 다양한 태그들이 존재하는데 가장 많이 사용하게 되시는 태그가 TouchableOpacity와 Pressable 입니다.

TouchableOpacity는 기존의 View태그가 터치에 반응하도록 만들어진 block 요소이며 onPress 이벤트가 발생하면 View의 불투명도가 감소하여 흐리게 표시됩니다.

Pressble은 ReactNative 0.63 버전부터 지원된 태그입니다(현재 0.68 버전). 광범위한 onPress 이벤트를 단계적으로 처리하는 태그이며(onPressIn, onPressOut, ...), TouchableOpacity와는 다르게 불투명도에 영향을 주지 않습니다.

이 외에도 다양한 태그들이 존재합니다. React Native Components Docs 를 참고해보세요!

---

React-Native Styled Component

웹 프로젝트를 할 때 우리는 styled compnent를 사용하기 위해 emotion을 사용해주었죠?
앱에서 styled를 ‘@emotion/styled’로 import 해올 수 없지만 같은 방식으로 styled component를 사용하기 위해 새로운 패키지를 설치해주셔야합니다!

바로 **@emotion/native**인데요!
이 패키지를 설치하시면 기존에 우리가 작성했던 styled component와 동일하게 앱프로젝트에서도 사용할 수 있습니다.

@emotion/styled 설치 링크

@emotion/styled 설치 명령어 입니다.

# npm
npm install @emotion/react @emotion/native

# yarn
yarn add @emotion/react @emotion/native

이렇게 설치해주시고 styles.ts 파일에서 @emotion/native를 import 하여 styled component를 만들어주시면 되겠죠??! 여기서부터는 여러분께서 작성하시던 것과 동일하지만 태그 이름만 react native 태그 이름으로 변경해주시면 됩니다!

import styled from '@emotion/native'

export const Container = styled.View`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
`

export const Image = styled.Image`
  padding: 40px;
`