React Native

React Native

리액트로 모바일앱을 만들 수 있는 프레임 워크

리액트로 android, ios 네이티브앱을 동시에 만들 수 있는 크로스플랫폼

 

React Native 장점

1.하나만 만들면 되니깐 개발 비용이 절감된다.

2.리액트 알고있으면 배우기 쉽다. 

 

React Native 세팅하려면

1.Expo Go

• 쉬운 셋업 및 빠른 초기개발
• Native 코드 수정은 불가능

2.React Native CLI

• 모든 React Native 를 위한 인프라를 직접 설치
• Native 코드 직접 수정 가능

3.CRNA

• CRA 에서 영감을 받고 만든 React Native Boiler Plate로 Expo SDK와 Cli의 특징을 모두 가지고 있음
• Android Studio 또는 Xcode 설치 필요

4.ignite

• CRNA + MobX 등 각종 라이브러리들도 샘플 코드들이 들어 있음.
• React Native로 복잡한 앱을 만들어야 할 때 초기 셋업 후 간단한 수정작업으로 앱 완성 가능. 숙련자에게 오히려 추천

 

React Native 주요 UI 컴포넌트

const App()=>{
<>
<View></View>  {/* => <div> 랑 비슷한 역할 */}
<Text></Text>  {/* => <p> 랑 비슷한 역할 */}
<Image></Image> {/* => <image> 랑 비슷한 역할 */} 
<ScrollView></ScrollView> {/* => 스크롤 가능한 범위 지정 */} 
<TextInput></TextInput>  {/* => <imput> 랑 비슷한 역할 */} 


<TouchableOpacity></TouchableOpacity> 
{/* => <button> 이랑 비슷한 역할 // <Button>태그가 따로 있긴한데 사용하기 구데기 같아서 안씀 
<TouchableOpacity>쓰면됨 */} 

<SafeAreaView></SafeAreaView>
{/* => 스마트폰 상단의 노치나 카메라 등에 해당하는 높이까지를 제외하고 Area를 잡는다 */} 

<StatusBar></StatusBar> {/* => 스마트폰 최상단  상태창 부분 */} 
</>
}

주의사항

• 웹: <div>텍스트</div> (Ok)
• 앱: <View>텍스트</View> (Not Ok) >> <View><Text>텍스트</Text></View> (Ok)
• View 는 기본적으로 flexBox 이며 default flex-direction은 column

 

React Native 스타일링 방법

1.inline styling

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

const App = () => (
  <View style={{ marginTop: 10, flex: 1 }}>
    <Text>React Native</Text>
  </View>
);

2.StyleSheet

https://reactnative.dev/docs/stylesheet

StyleSheet · React Native

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

const App = () => (
  <View style={styles.container}>
    <Text>React Native</Text>
  </View>
);

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

3.Styled Component

VS CODE Extension 중: vscode-styled-components 설치 필요 (자동완성 목적)

https://emotion.sh/docs/@emotion/native

Emotion – @emotion/native

import { Text } from "react-native";
import styled from '@emotion/native'

// VS CODE Extension 중 vscode-styled-components 를 설치해야 css styling 자동완성 기능 이용 가능
const StyledView = styled.View`
  flex: 1;
	margin-top: 10px
`
const App = () => (
  <StyledView>
    <Text>React Native</Text>
  </View>
);

// 다크 모드 적용
import { useColorScheme } from "react-native"; // 현재 디바이스가 light mode 인지 dark mode 인지

4.Tailwind

https://www.nativewind.dev/quick-starts/expo

Expo | NativeWind

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

const App = () => (
  <View className="mt-10 flex-1">
    <Text>React Native</Text>
  </View>
);

 

 

 

React Native 의 태그 속성

<TouchableOpacity onPress={내용}></TouchableOpacity>
{/* onPress: onClick 과 비슷한 역할 */}

<TextInput onChangeText={내용} onSubmitEditing={내용}></TextInput>
{/* onChangeText: onChange 와 비슷한 역할
onSubmitEditing: 앱에선 <form action="submit">태그 안씀 대신 onSubmitEditing 씀 */}

 

React Native 유용한 기능

삭제 처리 전에 Alert API를 이용해서 “정말로 삭제하시겠습니까?” 얼럿 띄운 후 확인 시 삭제 처리

Alert API 사용

https://reactnative.dev/docs/alert

Alert · React Native

const deleteTodo = (id) => {
    Alert.alert("Todo삭제", "삭제하시겠습니까?", [
      {
        text: "취소",
        style: "cancel",
        onPress: () => console.log("취소"),
      },
      {
        text: "삭제",
        style: "destructive",
        onPress: async () => {
          await deleteDoc(doc(db, "todos", id));
        },
      },
    ]);
  };

 

 

가장 중요한건 

공식문서 탐색 

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native