리액트 네이티브 기본태크

리액트 네이티브는 다양한 기본 태그를 사용하여 앱의 UI 를 구성합니다. 몇가지 중요한 기본 태그를 알아보겠습니다.

  1. <Button />

    버튼을 만들 때 사용하는 태그입니다. 사용자가 클릭할 수 있는 영역을 제공하며, 클릭 시 특정 동작을 수행할 수 있습니다.

  2. <TextInput />

    사용자가 텍스트를 입력할 수 있는 입력 필드를 생성하는 태그입니다. 예를 들어, 로그인 화면에서 사용자 이름이나 비밀번호를 입력할 때 사용됩니다.

  3. <FlatList />

    스크롤 가능한 리스트를 생성하는 태그입니다. 리스트의 데이터가 많을 때 효율적으로 표시할 수 있도록 도와줍니다. 예를들어, 메세지 목록이나, 상품 목록을 표시할 때 유용합니다.

  4. <StatusBar /> 앱의 상태 표시줄을 설정하는 태그입니다. 상태 표시줄의 스타일(ex. 배경색, 글자색)을 조정할 수 있습니다.

웹뷰

웹뷰는 모바일 앱 내에서 웹페이지를 표시할 수 있는 컴포넌트입니다. 앱에서 외부 웹사이트를 열고 싶을 때 사용합니다.

💡 yarn add와 expo install 의 차이 yarn add 일반적으로 패키지를 설치할 때 사용하는 명령어 입니다.

expo install Expo 프로젝트에서 사용할 수 있는 패키지를 설치할 때 사용하는 명령어 입니다. Expo 가 사용하는 특정 버전과 호환되는 패키지를 자동으로 선택합니다.

때문에 expo 를 사용해서 프로젝트를 진행 할시, expo install 명령어를 통해 패키지를 설치해야 합니다.

웹뷰와 웹 프론트엔드 연동

안드로이드에서 로컬 서버에 접근할때는 10.0.2.2 를 사용합니다. 이는 에뮬레이터에서 호스트 컴퓨터의 localhost 를 가리킵니다.

iOS에서는 127.0.0.1 을 사용하여 로컬 서버에 접근합니다.

Expo 에서 Next.js 연동하기 실습

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

const App = () => {
  return (
    <View style={styles.container}>
      <WebView source={{ uri: '<http://10.0.2.2:3000>' }} />  // 안드로이드 에뮬레이터
      {/* iOS에서는 아래와 같이 127.0.0.1로 설정 */}
      {/* <WebView source={{ uri: '<http://127.0.0.1:3000>' }} /> */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;