[RN] URL 파라미터 vs 스토어 기반 라우팅: React Native 네비게이션 리팩토링 완벽 가이드

🤔 들어가며

React Native 앱에서 네비게이션을 구현할 때, 페이지 간 데이터 전달 방식을 어떻게 선택하시나요?
URL 파라미터를 사용할지, 전역 상태 관리를 사용할지는 많은 개발자들이 고민하는 부분입니다.

최근 프로젝트에서 콘텐츠 상세 페이지의 라우팅 방식을 URL 파라미터에서 스토어 기반으로 전면 리팩토링했습니다.
이 과정에서 배운 각 방식의 장단점과 언제 어떤 방식을 선택해야 하는지에 대한 경험을 공유하고자 합니다.

---

📋 기존 방식: URL 파라미터 기반 라우팅

구현 방식

기존에는 전형적인 URL 파라미터 방식을 사용했습니다:

// 기존 파일 구조
src/app/content/detail/[id].tsx

// 네비게이션
const handleItemPress = (itemId: string) => {
  router.push(`/content/detail/${itemId}`);
};

// 상세 페이지에서 데이터 가져오기
export default function ItemDetailScreen() {
  const params = useLocalSearchParams<{ id?: string }>();
  const itemId = params.id;

  // API로 아이템 정보 가져오기
  const { data: item } = useGetItemById(itemId || '');

  return (
    <View>
      {/* 아이템 상세 정보 렌더링 */}
    </View>
  );
}

🎯 URL 파라미터 방식의 장점

1. 직관적인 URL 구조

/content/detail/item-123
/content/detail/item-456

URL만 봐도 어떤 아이템의 상세 페이지인지 알 수 있습니다.

2. 북마크 및 공유 가능

// URL을 직접 공유할 수 있음
const shareUrl = `myapp://content/detail/${itemId}`;

3. 브라우저의 뒤로가기 지원

웹 환경에서 브라우저의 뒤로가기 버튼이 자연스럽게 동작합니다.

4. SEO 친화적 (웹 앱의 경우)

각 페이지가 고유한 URL을 가져 검색 엔진 최적화에 유리합니다.

---

🚨 하지만 문제가 생겼습니다...

1. 복잡한 데이터 전달의 한계

상세 페이지에서는 단순히 아이템 ID만 필요한 게 아니었습니다:

// 실제로 필요했던 데이터들
interface DetailPageData {
  selectedItemId: string;        // 선택된 아이템 ID
  allItems: Item[];              // 전체 아이템 목록 (네비게이션용)
  category: string;              // 카테고리 정보
  searchContext: {               // 검색 맥락 정보
    searchQuery: string;
    filterOptions: FilterState;
  };
}

이 모든 데이터를 URL 파라미터로 전달하려면?

// 이렇게 해야 할 뻔했습니다... 😱
const queryString = `?id=${itemId}&category=${category}&filter=${JSON.stringify(filters)}&items=${JSON.stringify(allItems)}`;
router.push(`/content/detail${queryString}`);

2. 데이터 일관성 문제

// 목록 페이지에서 아이템 선택 시
const handleItemPress = (item: Item) => {
  // 이 데이터들이 상세 페이지에 어떻게 전달될까요?
  const allSearchResults = [item1, item2, item3, ...];
  const currentCategory = "electronics";

  router.push(`/content/detail/${item.id}`); // ID만 전달 😰
};

// 상세 페이지에서는...
export default function ItemDetailScreen() {
  const { id } = useLocalSearchParams();

  // 다시 API를 호출해서 관련 아이템들을 가져와야 함
  const { data: relatedItems } = useGetRelatedItems(id);
  // 하지만 검색 결과와 다를 수 있음! 🐛
}

3. 성능 이슈

// 매번 상세 페이지에서 모든 데이터를 새로 로딩
const ItemDetailScreen = () => {
  const { id } = useLocalSearchParams();

  // 이미 있는 데이터임에도 다시 API 호출
  const { data: item, isLoading } = useGetItemById(id);
  const { data: reviews, isLoading: reviewsLoading } = useGetItemReviews(id);
  const { data: related, isLoading: relatedLoading } = useGetRelatedItems(id);

  if (isLoading || reviewsLoading || relatedLoading) {
    return <LoadingSpinner />; // 불필요한 로딩 시간
  }

  return <DetailView />;
};

4. 복잡한 상호작용의 한계

// 목록에서 다른 아이템으로 빠른 전환 시
const handleQuickSwitch = (newItemId: string) => {
  const selectedItem = allItems.find(item => item.id === newItemId);

  // 이 정보들을 어떻게 전달할까요?
  // - selectedItem 객체
  // - allItems 배열 (네비게이션용)
  // - 현재 필터 상태
  // - 검색 맥락

  router.push(`/content/detail/${newItemId}`); // 결국 ID만 전달...
};

---

✨ 해결책: 스토어 기반 라우팅으로 전환

새로운 아키텍처 설계

Zustand를 사용해서 상세 페이지를 위한 전용 스토어를 만들었습니다:

// src/store/detailStore.ts
import { create } from 'zustand';
import { Item } from '@/api/types/item';

interface DetailState {
  selectedItemId: string | null;
  allItems: Item[];
  category: string;
  filterState: FilterState;
  setDetailData: (
    itemId: string,
    allItems?: Item[],
    category?: string,
    filterState?: FilterState
  ) => void;
  clearDetailData: () => void;
}

export const useDetailStore = create<DetailState>((set) => ({
  selectedItemId: null,
  allItems: [],
  category: '',
  filterState: {},

  setDetailData: (itemId, allItems = [], category = '', filterState = {}) => {
    set({
      selectedItemId: itemId,
      allItems,
      category,
      filterState,
    });
  },

  clearDetailData: () => {
    set({
      selectedItemId: null,
      allItems: [],
      category: '',
      filterState: {},
    });
  },
}));

파일 구조 단순화

// Before: 동적 라우트
src/app/content/detail/[id].tsx

// After: 정적 라우트  
src/app/content/detail.tsx

URL 파라미터가 필요 없어졌으니 파일 구조도 더 간단해졌습니다.

새로운 네비게이션 플로우

// 목록 페이지에서 아이템 선택
const handleItemPress = (item: Item) => {
  console.log('아이템 선택:', item);

  // 1. 스토어에 모든 필요한 데이터 저장
  setDetailData(item.id, searchResults, category, currentFilters);

  // 2. 간단한 라우팅
  router.push('/content/detail');
};

// 빠른 아이템 전환
const handleQuickSwitch = (newItemId: string) => {
  const item = allItems.find((item) => item.id === newItemId);
  if (item) {
    // 선택된 아이템 ID만 업데이트 (다른 데이터는 유지)
    setSelectedItemId(item.id);
  }
};

상세 페이지 구현

// src/app/content/detail.tsx
export default function ItemDetailScreen() {
  const {
    selectedItemId,
    allItems,
    category,
    filterState
  } = useDetailStore();

  // 스토어의 ID로 API 호출 (캐싱 활용 가능)
  const { data: selectedItem } = useGetItemById(selectedItemId || '');

  // 네비게이션 정보는 스토어에서 바로 사용
  const navigationItems = useMemo(() =>
    allItems.map((item) => ({
      id: item.id,
      title: item.title,
      isSelected: selectedItem?.id === item.id,
    })),
    [allItems, selectedItem?.id]
  );

  return (
    <View>
      {/* 아이템 네비게이션 */}
      <ItemNavigation 
        items={navigationItems}
        onItemSelect={handleQuickSwitch}
      />

      {/* 선택된 아이템의 상세 정보 */}
      <ScrollView>
        <ItemInfo item={selectedItem} />
        <RelatedSection category={category} />
      </ScrollView>
    </View>
  );
}

---

📊 비교: Before vs After

데이터 플로우 비교

Before (URL 파라미터):

목록 페이지 → URL 파라미터 → 상세 페이지 → API 재호출 → 렌더링
     ↓              ↓            ↓         ↓
  [복잡한 데이터]   [ID만 전달]   [맥락 손실]  [중복 로딩]

After (스토어 기반):

목록 페이지 → 스토어 저장 → 상세 페이지 → 스토어에서 조회 → 렌더링
     ↓           ↓          ↓           ↓
  [모든 데이터]   [전체 저장]  [맥락 유지]   [즉시 표시]

성능 비교

항목 URL 파라미터 스토어 기반

초기 로딩 시간	3-4개 API 호출	캐시된 데이터 활용
아이템 전환 반응	페이지 리로드	즉시 업데이트
메모리 사용량	API 응답 중복 저장	스토어에서 공유
네트워크 요청	매번 새 요청	필요시에만 요청

---

⚖️ 트레이드오프: 무엇을 잃고 무엇을 얻었나?

😔 잃은 것들

1. URL 기반 네비게이션

// 더 이상 불가능
const directUrl = `/content/detail/${itemId}`;

2. 딥링크 지원의 복잡성

// 딥링크 처리 시 스토어 초기화 필요
const handleDeepLink = (url: string) => {
  const itemId = extractItemId(url);
  // 스토어에 데이터가 없으면 API로 가져와야 함
  await initializeStoreForItem(itemId);
};

3. 브라우저 히스토리 관리

웹 환경에서는 추가적인 히스토리 관리가 필요합니다.

🎉 얻은 것들

1. 빠른 네비게이션

// 즉시 페이지 전환, 로딩 없음
setDetailData(item.id, allItems, category);
router.push('/content/detail'); // 0.1초 내 화면 전환

2. 데이터 일관성

// 검색 결과와 상세 페이지의 데이터가 항상 동일
const { allItems } = useDetailStore(); // 검색 결과 그대로

3. 복잡한 상호작용 지원

// 빠른 아이템 전환
const handleQuickSwitch = (itemId: string) => {
  setSelectedItemId(itemId); // 즉시 반영
};

4. 메모리 효율성

// 한 번 로드된 데이터는 스토어에서 재사용
const cachedData = useDetailStore(); // API 재호출 불필요

---

🎯 언제 어떤 방식을 선택해야 할까?

URL 파라미터가 적합한 경우

1. 단순한 데이터 전달

// 사용자 프로필 페이지
router.push(`/user/${userId}`); // ID만 있으면 충분

2. SEO가 중요한 웹 앱

// 블로그 포스트
router.push(`/posts/${postSlug}`); // 검색 엔진 최적화 필요

3. 딥링크가 핵심 기능

// 상품 상세 페이지
const shareUrl = `myapp://product/${productId}`; // 공유 기능 중요

스토어 기반이 적합한 경우

1. 복잡한 데이터 구조

// 다단계 폼, 쇼핑 카트, 복잡한 설정
interface ComplexData {
  step1: FormData;
  step2: FormData;
  context: AppContext;
}

2. 빠른 사용자 경험이 중요

// 대시보드, 실시간 데이터
setData(complexData);
router.push('/dashboard'); // 즉시 전환

3. 상태 공유가 필요

// 여러 페이지에서 같은 데이터 사용
const sharedState = useGlobalStore();

---

🛠️ 실제 구현 팁

1. 스토어 초기화 처리

export default function DetailScreen() {
  const { selectedItemId } = useDetailStore();

  // 스토어가 비어있으면 홈으로 리다이렉트
  useEffect(() => {
    if (!selectedItemId) {
      router.replace('/(tabs)/home');
    }
  }, [selectedItemId]);
}

2. 메모리 정리

export default function DetailScreen() {
  const { clearDetailData } = useDetailStore();

  // 컴포넌트 언마운트 시 정리
  useEffect(() => {
    return () => {
      clearDetailData();
    };
  }, []);
}

3. 타입 안전성 확보

interface DetailState {
  selectedItemId: string | null; // null 체크 필수
}

const { selectedItemId } = useDetailStore();
if (!selectedItemId) {
  return <NotFoundScreen />;
}

---

🎯 마무리

URL 파라미터와 스토어 기반 라우팅 각각의 장단점을 이해하고, 프로젝트의 요구사항에 맞는 선택을 하는 것이 중요합니다.

📌 핵심 판단 기준

• ✅ 단순한 ID 전달: URL 파라미터
• ✅ 복잡한 데이터 전달: 스토어 기반
• ✅ SEO/딥링크 중요: URL 파라미터
• ✅ 빠른 UX 중요: 스토어 기반

개발한 앱의 특성상 복잡한 데이터 전달과 빠른 사용자 경험이 더 중요했기 때문에 스토어 기반으로 전환한 것이 옳은 선택이었습니다.