inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

네이게이터 or 화면 이동 관련해서 문의 드립니다.

해결된 질문

267

뉴비앱개발자

작성한 질문수 2

0

안녕하세요.

지난번 질문 드렸던 것은 해결이 되었는데요. (인터셉터 / DB 마이그 postgres -> mssql / fcm push )

 

구성은 강의 파일 기반으로 추가 및 수정 하고 있습니다.

nest js 서버( + fcm 송신 서버) -> android(fcm 알림 수신)

android fcm 수신 후 백그라운드 데이터 가공 (서버/로컬 data 처리 ) -> 가공 데이터로 push 생성

데이터 가공 (hooks) 하기 위해 (FetchData.ts) 파일을 import 하였습니다. (ok)

import useFetchData from '@/hooks/useFetchData';

발생한 push 알림 메세지를 클릭시 특정 화면으로 이동하고 싶은데요.

ex) FeedList.tsx // FeedHomeScreen.tsx 쪽으로 이동하고 싶은데요.. 잘 안되고 있습니다.

(이벤트 발생 위치는 알지만 처리를 못하고 있습니다.)

 

App내에서 hooks을 사용해서 그런지

App 내에서 useNavigation() 을 사용해서 처리 하려고 했더니

navigation.navigate('RootNavigator');

MainDrawerNavigator / FeedList / FeedHomeScreen 등등 해봤는데 시작 전에 에러나 가더라고요.

렌더링 에러가 납니다.

import React, { useEffect } from 'react';
import { StatusBar, Platform } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { QueryClientProvider } from '@tanstack/react-query';
import Toast, { BaseToast, BaseToastProps, ErrorToast } from 'react-native-toast-message';

import MainDrawerNavigator from './src/navigations/drawer/MainDrawerNavigator';
import AuthStackNavigator from './src/navigations/stack/AuthStackNavigator';
import useAuth from '@/hooks/queries/useAuth';

import RootNavigator from './src/navigations/root/RootNavigator';
import queryClient from './src/api/queryClient';
import { colors } from '@/constants';
import useThemeStorage from '@/hooks/useThemeStorage';

// push 추가
import messaging from '@react-native-firebase/messaging';
import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import { getEncryptStorage, setEncryptStorage } from '@/utils/encryptStorage';
import useFetchData from '@/hooks/useFetchData';
const App = () => {
  const navigation = useNavigation();    // 화면 이동용
  const { theme } = useThemeStorage();
  const { fetchData } = useFetchData();  // 데이터 가공

  usePushNotifications(fetchData, navigation); // FCM수신 -> 가공data 전달
  useTokenRegistration();  // 토큰 저장

  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <StatusBar
          barStyle={theme === 'light' ? 'dark-content' : 'light-content'}
          backgroundColor={theme === 'light' ? colors['light'].WHITE : colors['light'].BLACK}
        />
        <RootNavigator />              
        <Toast config={toastConfig} />
      </NavigationContainer>
    </QueryClientProvider>
  );
};

어떻게 접근 해야 할지 잘 모르겠습니다.

베이스가 부족해서 그런지 네이게이터와 스크린 (단순 이동 뿐이 못하겠습니다. ㅎㅎ)

주말 잘 보내세요 감사합니다.

 

react-native typescript nestjs react-query zustand

답변 1

1

Kyo

강의와 다른것을 구현하고 계시고, 각 hooks들이 무슨 역할이고 어떻게 구현하셨는지, 어떤에러가 발생했는지 잘 모르겠어서 도움드리기가 어려울것 같아요! 다만 화면을 이동할때 네비게이터를 넣으셨다고 했는데 스크린으로 이동을 해주셔야할것같습니다.

1

뉴비앱개발자

빠른 답변 감사합니다.

변경된 코드가 강좌와 성격도 다르고 내용도 달라져서 질문하기 쉽지 않았는데요.

좀 더 찾아 보겠습니다. 감사합니다.

1

Kyo

또한 NavigationContainer 안에서 스크린을 이동해야하는데, 그 밖에서 이동을 하면 문제가 될것같아요

0

뉴비앱개발자

답변 감사합니다.

말씀하시긴 내용 기반으로 이것 저것 해봐야 할 것 같습니다.

사실 특정 화면으로 다이렉트 화면을 이동하고 싶은거라서요.

App->Root->Main->FeedList (기존) 이런식아니고

바로 App(FCM 수신) -> FeeList(변경)로 이동하고 싶은거라서요.

빠른 감사합니다. ㅎㅎ

0

뉴비앱개발자

감사합니다. 해결했습니다. - 글을 수정했더니 ... 엄청 깨지네요..

 

App에서 직접 사용 안되고 AppContent 한번 감싸서(Boxing?/래핑? ) 사용 해야 되나보네요..

빡싱(boxing) 한번 해서 레벨을 App보다 낮춰서 사용하니깐 되네요.. (이미 fechData.ts 쓸때 사용했는데 이해를 못하고 한거라...... )

AppContent 에서 useNavigation() 선언해서 호출할 곳에서 스크린명으로 호출하니 바로 이동 되네요.

App (TOP)레벨에서는 Hooks이나 useNavigation 을 직접 사용 못해서 그런것 같습니다.

 

navigation.navigate(mainNavigations.선언명);

const AppContent = () => { const navigation = useNavigation(); const { fetchData } = useFetchData(); usePushNotifications(fetchData, navigation); return ( <RootNavigator /> ); }; const App = () => { const { theme } = useThemeStorage(); useTokenRegistration(); return ( <QueryClientProvider client={queryClient}> <NavigationContainer> <StatusBar barStyle={theme === 'light' ? 'dark-content' : 'light-content'} backgroundColor={theme === 'light' ? colors['light'].WHITE : colors['light'].BLACK} /> <AppContent /> <Toast config={toastConfig} /> </NavigationContainer> </QueryClientProvider> ); };

 

react-native-screens 버전 호환 문제

2

153

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

103

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

83

1

강의 수강 순서 관련

0

71

1

애뮬레이터 실행 방법

0

99

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

71

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2