Expo 딥링크 - 쿼리 파라미터로 데이터 전달하고 받기

Expo Deep Linking - Passing and Receiving Data with Query Parameters

{
  "expo": {
    "name": "My Awesome App",
    "slug": "my-awesome-app",
    "scheme": "myawesomeapp", // 여기에 원하는 스킴을 입력합니다.
    "web": {
      "bundler": "metro"
    },
    "plugins": [
      "expo-router" // Expo Router를 사용하고 있다면 이 플러그인이 필요합니다.
    ]
    // ... 기타 설정 ...
  }
}

expo prebuild

// 파일 경로: app/products/detail.tsx
 
import { useLocalSearchParams } from 'expo-router';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
export default function ProductDetailScreen() {
  // useLocalSearchParams 훅을 사용하여 현재 경로에 전달된 파라미터를 가져옵니다.
  // 제네릭 타입을 사용하여 파라미터의 타입을 명시할 수 있습니다.
  const params = useLocalSearchParams<{ productId?: string; category?: string }>();
 
  const productId = params.productId; // 'productId' 키로 값 추출
  const category = params.category;   // 'category' 키로 값 추출 (있다면)
 
  console.log('전달받은 Product ID:', productId);
  console.log('전달받은 Category:', category);
 
  // productId를 사용하여 상품 정보를 불러오는 등의 로직 수행 가능
  // useEffect(() => {
  //   if (productId) {
  //     fetchProductDetails(productId);
  //   }
  // }, [productId]);
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>상품 상세 페이지</Text>
      {productId ? (
        <Text>요청된 상품 ID: {productId}</Text>
      ) : (
        <Text>상품 ID가 전달되지 않았습니다.</Text>
      )}
      {category && ( // category 파라미터가 있을 경우 표시
        <Text>카테고리: {category}</Text>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

# Android 에뮬레이터/기기
npx uri-scheme open myawesomeapp://products/detail?productId=999 --android
 
# iOS 시뮬레이터/기기
npx uri-scheme open myawesomeapp://products/detail?productId=999 --ios