[React Native] navigation 에러

문제

stack navigation을 이용하여 버튼 클릭 시 페이지 이동 기능을 구현하고 있다.

App.js

import { StyleSheet, View } from 'react-native';
import MyPage from './src/pages/mypage';
import 'react-native-gesture-handler';

export default function App() {
  return (
    <View style={styles.container}>
      <MyPage/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});

StackNavigator.js

import { createStackNavigator } from '@react-navigation/stack';
import Profile from '../src/pages/profile';
import Competition from '../src/pages/competition';
import Community from '../src/pages/community';
import BookBarcode from '../src/pages/bookBarcode';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <Stack.Navigator>
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Competition" component={Competition} />
        <Stack.Screen name="Community" component={Community} />
        <Stack.Screen name="BookBarcode" component={BookBarcode} />
    </Stack.Navigator>
  );
}

export default MyStack;

MyPage.js

import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import profile from '../assets/profile.png';
import settings from '../assets/settings.png';

const MyPage = ({content, navigation}) => {
  return (
    <View style={styles.container}>
        <View style={styles.box1}>
          <View style={styles.textBox}>
            <Image source={profile}/>
            <View style={styles.infoBox}>
                <Text style={styles.grade}>학년 반 번호</Text>
                <Text style={styles.name}>이름</Text>
            </View>
          </View>
          <TouchableOpacity onPress={() => {navigation.navigate('Profile'), content}}>
            <Image source={settings}/>
          </TouchableOpacity>
        </View>

		...(중략)

    </View>
  );
}

...(중략)

export default MyPage;

설정 버튼을 누르면 프로필 설정 페이지로 이동하는 코드인데,

Identifier 'navigation' has already been declared. (9:26)

   7 | import { useNavigation } from '@react-navigation/native';
   8 |
>  9 | const MyPage = ({content, navigation}) => {
     |                           ^
  10 |   const navigation = useNavigation();
  11 |   return (
  12 |     <View style={styles.container}>

요러한 오류가 남
스택오버플로우를 참고해서

MyPage.js

import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import profile from '../assets/profile.png';
import settings from '../assets/settings.png';
import { useNavigation } from '@react-navigation/native';

const MyPage = () => {
  const navigation = useNavigation();
  
  return (
    <View style={styles.container}>
        <View style={styles.box1}>
          <View style={styles.textBox}>
            <Image source={profile}/>
            <View style={styles.infoBox}>
                <Text style={styles.grade}>학년 반 번호</Text>
                <Text style={styles.name}>이름</Text>
            </View>
          </View>
          <TouchableOpacity onPress={() => {navigation.navigate('Profile')}}>
            <Image source={settings}/>
          </TouchableOpacity>
        </View>

		...(중략)

    </View>
  );
}

...(중략)

export default MyPage;

props에 navigation을 넘기는 대신 useNavigation을 사용하도록 고쳤다.
그랬더니

Error: Couldn't find a navigation object. Is your component inside NavigationContainer?

다른 오류가 생겻다🤦‍♀️
NavigationContainer 안에 넣어야 한대서

App.js

import { StyleSheet, View } from 'react-native';
import MyPage from './src/pages/mypage';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <MyPage/>
      </View>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});

감싸줬더니

 The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.

또 다른 오류가 생겼다!~~
에러를 읽어보니.. 공식 문서를 보래서 읽어봤더니 네비게이터를 렌더링하지 않거나, 마운트가 되기 전에는 오류가 나고 아무 작업도 수행되지 않으니까 RootNavigation.js 파일을 따로 만들어서 관련 작업을 처리해야 한다는 내용이었다.

그런데 뭔가... 점점 원래 사용하려면 것과 멀어지는 느낌이 들어 내 코드를 처음부터 찬찬히 다시 봤는데...

해결

알고보니 내가 StackNavigator.js에 마이페이지를 추가해주지 않아서 생긴 일이엇다,,, 이동할 페이지만 만들어주고 정작 버튼이 있는 페이지는 넣어놓지 않았기 때문에 생긴 오류여따ㅜㅜ 앞으로는 뭔가 안되면 일단 내 코드부터 뜯어보고 시작해야겠당😥