[RN] 📱React Native 사용하기

TATA·2023년 7월 25일

React-Native

목록 보기

2/12

▷ React Native

React Native는 JavaScript와 React를 사용하여 iOS와 Android 모바일 애플리케이션을 개발할 수 있는 오픈 소스 프레임워크이다.

📱 Expo로 시작하기

# 처음 한 번만 설치
# npm install -g expo-cli

npx create-expo-app --template

# 타입스크립트로 하고 싶은 경우
# npx create-expo-app -t expo-template-blank-typescript

📱 CLI로 시작하기

Mac에서 CLI로 React-Native 시작하기

📱 모바일 에뮬레이션

− Android Studio a
− Xcode i
xcode 시뮬레이터

▷ Core Components

Core Components → React Native의 기본적인 UI 요소들

SafeAreaView: 화면 상단이나 하단의 홈 바 등과 같은 요소로부터 컨텐츠를 안전하게 배치할 수 있도록 도와줌. (OS 버전 11 이상이 설치된 iOS 기기에만 적용됨)

StatusBar: 모바일 디바이스의 상태 표시줄에 대한 설정을 제어 가능.

<StatusBar backgroundColor="white" barStyle="dark-content" />

Text: 글자

<Text numberOfLines={1} ellipsizeMode="tail">
  제목
</Text>

TextIput: 사용자로부터 텍스트를 입력을 받음. (비밀번호일 경우 secureTextEntry 속성 추가하기)

FlatList: 대량의 데이터를 효율적으로 렌더링하기 위한 리스트 컴포넌트임.

/* FlatList 컴포넌트의 옵션 */
// data => 렌더링할 데이터 배열을 설정
// renderItem => 각 아이템을 렌더링하기 위한 콜백 함수를 설정
// keyExtractor => 고유한 키 값

const MyComponent = () => {
  // 가상의 데이터 배열
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    // 추가적인 아이템들...
  ];

  return (
    <FlatList
      data={data} // 표시할 데이터 배열
      renderItem={({ item }) => <ItemComponent {...item} />} // 컴포넌트를 통해 아이템을 렌더링
      keyExtractor={(item) => item.id} // 각 아이템의 고유 키를 지정
      showsHorizontalScrollIndicator={false} // 가로 스크롤 인디케이터 숨김
      horizontal // 가로 스크롤 허용
      ItemSeparatorComponent={() => <View style={{ width: 16 }} />} // 아이템 사이의 간격
      contentContainerStyle={{flexGrow: 1, paddingHorizontal: 16}}
      numColumns={2} // grid처럼 사용
    />
  );
};

KeyboardAvoidingView: 키보드가 화면을 가리는 상황에서 자동으로 화면을 조정하여 컴포넌트를 가리지 않도록 도와주는 역할을 함.

import { KeyboardAvoidingView } from 'react-native';

...
<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
</KeyboardAvoidingView>

Pressable: 터치 이벤트를 감지하여 사용자의 터치 입력에 반응하는 역할을 함.

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

-----
<Pressable
  hitSlop={20} // hitSlop => 사용자가 터치 이벤트를 발생시키는 영역을 확장하는 역할
  pressRetentionOffset={30} // pressRetentionOffset => 사용자가 터치를 시작한 후에도 해당 영역을 누르고 있는 동안에만 터치 이벤트를 유지하는 역할
> 
  <Text>I'm pressable!</Text>
</Pressable>

TouchableOpacity: 터치 이벤트 발생 시 투명도가 변함. (터치 효과를 주는 데 주로 사용)

ScrollView: 스크롤 가능. horizontal 붙이면 가로 스크롤 가능

<ScrollView horizontal>
  ...
</ScrollView>

▷ 컴포넌트의 이벤트 속성

TextInput 컴포넌트
onChangeText: TextInput에 텍스트를 입력할 때마다 호출되는 이벤트
onSubmitEditing: TextInput에서 텍스트를 입력하고 제출할 때 호출되는 이벤트

Pressable 컴포넌트
onPress: Pressable를 탭할 때 호출되는 이벤트

TouchableOpacity 컴포넌트
onPress: TouchableOpacity를 탭할 때 호출되는 이벤트

ScrollView 컴포넌트
onScroll: ScrollView가 스크롤되는 동안 호출되는 이벤트
onContentSizeChange: ScrollView의 내용 크기가 변경될 때 호출되는 이벤트

FlatList 컴포넌트
onEndReached: 스크롤하여 리스트의 끝에 도달했을 때 호출되는 이벤트
onRefresh: 리스트를 새로고침 하도록 요청했을 때 호출되는 이벤트

Image 컴포넌트
onLoad: 이미지 로드가 성공적으로 완료되었을 때 호출되는 이벤트
onError: 이미지 로드 중 오류가 발생했을 때 호출되는 이벤트

▷ StyleSheet

StyleSheet

// StyleSheet 가져오기
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === "android" ? 20 : 0,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold', // 카멜케이스 사용
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

✚ 참고

styled-components도 사용할 수 있다.

# 설치
npm install --save styled-components

# 타입스크크립트 사용 시 추가 설치
# npm install -D @types/styled-components @types/styled-components-react-native

/* styled-components 사용 예시 */
import { styled } from 'styled-components';

const StyledTextInput = styled.TextInput`
  background-color: pink;
`;

...
<StyledTextInput placeholder="이메일" value={email} onChangeText={setEmail}/>

▷ TailwindCSS

NativeWind React Native CLI

# 설치
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

# tailwind.config.js 파일 생성
npx tailwindcss init

tailwind.config.js

module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
+ plugins: ["nativewind/babel"],
};

global.d.ts

/// <reference types="nativewind/types" />

▷ svg 사용법

# 설치
npm install react-native-svg
# Expo일 경우 ↓
# expo install react-native-svg

npm install -D react-native-svg-transformer

metro.config.js 파일 생성

/* metro.config.js */
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

React Navigation → 다른 페이지로 이동할 수 있게 해주는 라이브러리

설치

npm install @react-navigation/native @react-navigation/native-stack
@react-navigation/bottom-tabs @react-navigation/material-top-tabs --save

npm install react-native-screens react-native-safe-area-context
# expo일 경우
# npx expo install react-native-screens react-native-safe-area-context

📱 NavigationContainer, createNativeStackNavigator

/* App.js */
// NavigationContainer, createNativeStackNavigator 가져오기
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
// 타입스크립트
// const navigation = useNavigation<NativeStackNavigationProp<any>>();

const MyStack = () => {
  return (
    <NavigationContainer> // 감싸기
      <Stack.Navigator> // 감싸기2
        <Stack.Screen // 컴포넌트 경로 지정
          name="Home"
          component={HomeScreen} 
          options={{ headerShown: false }} // 상단의 타이틀 안 보이게 해줌
          // options={{ title: 'Welcome' }} => 상단의 타이틀 변경
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator> // 감싸기2
    </NavigationContainer> // 감싸기
  );
};

📱 Naviagation Props

function Home({ navigation }) {
  const goToProfile = () => {
    navigation.navigate('Profile'); // Profile로 경로 이동.
    // navigation.goBack() => 뒤로가기
    // navigation.push('Profile') => 새 화면을 스택에 넣음
    // navigation.replace('Profile') => 현재 화면을 새 화면으로 교체
    // navigation.reset({ index: 0, routes: [{ name: 'Profile' }] }) => routes 배열로 히스토리를 초기화하며, index가 0인 Profile로 이동
    // navigation.setOptions({title: 'Notice'}) => 상단의 타이틀을 Notice로 변경
  };
  
  return (
    <Pressable onPress={goToProfile}>
      <Text>Go to Profile</Text>
    </Pressable>
  );
}

📱 Params

/* App.tsx */
function App() {
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" options={{headerShown: false}}>
          {props => <HomeScreen {...props} paramName="home" />} // 이런식으로 사용함
        </Stack.Screen>
        <Stack.Screen name="Profile" options={{headerShown: false}}>
          {props => <ProfileScreen {...props} paramName="profile" />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Params 넘기기

/* Home.jsx */
import {RouteProp, ParamListBase, useNavigation} from '@react-navigation/native';

function Home() {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  
  const goToProfile = () => {
    navigation.navigate('Profile', { // 두번째 인자로 전달함
      id: 1,
      name: 'tata',
    });
  };
  
  return (
    <Pressable onPress={goToProfile}>
      <Text>Go to Profile</Text>
    </Pressable>
  );
}

Params 전달받기

/* Profile.jsx */
import {useRoute} from '@react-navigation/native';

interface IProfile {
  id: number;
  name: string;
}

interface Props {
  paramName: string;
}

function Profile({}: Props) {
  const route = useRoute<RouteProp<{Profile: IProfile}, 'Profile'>>();
  const {params} = route;

  return (
    <View>
      <Text>Profile</Text>
      <Text>{params.id}</Text>
      <Text>{params.name}</Text>
    </View>
  );
}

... + map 사용

function Home({ navigation }) {
  const profiles = [
    { userId: 1, nickname: 'tata' },
    { userId: 2, nickname: 'coco' },
    { userId: 3, nickname: 'momo' },
  ];

  const goToProfile = (userId) => {
    navigation.navigate('Profile', {
      userId,
    });
  };

  return (
    <View>
      {profiles.map((profile) => (
        <Pressable key={profile.userId} onPress={() => goToProfile(profile.userId)}>
          <Text>{profile.nickname}</Text>
        </Pressable>
      ))}
    </View>
  );
}

📱 useNavigation

import { useNavigation } from '@react-navigation/native';

function Home() {
  const navigation = useNavigation();
  
  const goToProfile = () => {
    navigation.navigate('Profile'); // Profile로 경로 이동.
    // navigation.goBack() => 뒤로가기
    // navigation.push('Profile') => 새 화면을 스택에 넣음
    // navigation.replace('Profile') => 현재 화면을 새 화면으로 교체
    // navigation.reset({ index: 0, routes: [{ name: 'Profile' }] }) => routes 배열로 히스토리를 초기화하며, index가 0인 Profile로 이동
    // navigation.setOptions({title: 'Notice'}) => 상단의 타이틀을 Notice로 변경
  };
  
  return (
    <Pressable onPress={goToProfile}>
      <Text>Go to Profile</Text>
    </Pressable>
  );

▷ Alert, Toast

📱 Alert

try {
 ...
} catch (error) {
  Alert.alert(
    '이미 존재하는 회원입니다.',
    error.message,
    [{ text: '닫기', onPress: () => console.log('닫기') }],
    { cancelable: true } // alert창의 밖을 눌러도 alert창을 닫게 해줌
  );
}

📱 Toast

# 설치
npm install --save react-native-toast-message

App.js

/* App.js */
import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );

components/SignupButton.jsx

/* SignupButton.jsx */
import Toast from 'react-native-toast-message';

...
Toast.show({
  type: 'success',
  text1: '회원가입 완료',
  text2: `${email}으로 가입되었습니다.`,
});

▷ 다크모드 사용

useColorScheme

import React, { ReactNode } from 'react';
import { SafeAreaView, StatusBar, useColorScheme } from 'react-native';

interface Props {
  children: ReactNode;
}

const DefaultLayout = ({children}: Props) => {
  const theme = useColorScheme();
  const isDarkMode = theme === 'dark';

  return (
    <SafeAreaView>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={isDarkMode ? '#2B2B30' : '#F4F4F4'}
      />
      {children}
    </SafeAreaView>
  );
};

export default DefaultLayout;

👉 AsyncStorage 사용법

TATA

🌿 https://www.tatahyeonv.com

이전 포스트