[RN] 📱React Native 사용하기

▷ React Native

📱 Expo로 시작하기

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

npx create-expo-app --template

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

📱 CLI로 시작하기

📱 모바일 에뮬레이션

▷ Core Components

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

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

/* 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처럼 사용
    />
  );
};

import { KeyboardAvoidingView } from 'react-native';

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

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

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

<ScrollView horizontal>
  ...
</ScrollView>

▷ 컴포넌트의 이벤트 속성

▷ 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;

# 설치
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

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

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

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

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

/// <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 */
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>
  );
}

/* 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>
  );
}

/* 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>
  );
}

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 */
import Toast from 'react-native-toast-message';

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

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

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

▷ 다크모드 사용

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;