[React Native] 네비게이션 사용 시 추가 props 넘기기

스택 네비게이션을 사용하면서 A네비에서 B네비로 넘어가는 구조를 짰다.
그런데 stack.navigator를 작성했던 컴포넌트에서 B네비의 컴포넌트로 props를 넘길 일이 생겼다.

<Stack.Navigator
    initialRouteName="board1"
    screenOptions={{
      cardStyle: { backgroundColor: theme.white },
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    >
      <Stack.Screen 
        name="board1"
        component={HomeMain} 
        options={{title : '활로',
         headerShown : true}} 
      />
      <Stack.Screen 
        name="board2"
        component={boardlist} 
        options={({ route }) => ({
          title: community[route.params.board_type-1],
          headerShown: true,
          headerRight: () => (
            <TouchableOpacity onPress={() => alert('Icon Pressed!')}>
              <Icon name="menu" size={30} color="#000" style={{ marginRight: 10 }} />
            </TouchableOpacity>
          )
        })} 
        
      />
      <Stack.Screen 
        name="create_post"
        component={CreatePost} 
        options={{title : '게시글 쓰기', headerShown : true}} 
      />
      <Stack.Screen 
        name="notice_detail"
        options={{
          title : '게시글 상세', 
          headerShown : true,
          headerRight: () => (
            <MenuProvider>
              <TouchableOpacity onPress={() => {setModalVisible(true)}}>
                <Icon name="menu" size={30} color="#000" style={{ marginRight: 10, marginTop: 10 }} />
              </TouchableOpacity>
            </MenuProvider>
          ),
        }} 
      />
    </Stack.Navigator>

 <Container onPress={() => navigation.navigate("notice_detail", {board_type : board_type, board_id : notice.board_id})}>
                        <Title>{notice.title}</Title>
                        <Content>{notice.content}</Content>
                        <View style={{flexDirection: 'row'}}>
                        <Footer>{notice.writer} |</Footer>
                        <Footer> {notice.date.slice(0, 10)} {notice.date.slice(11, 16)}</Footer>
                        
                        
                        </View>
                    </Container>

const Notice_detail = ({ route }) => {
머시기머시기
}

이런식으로 notice_list 네비게이션으로 전환할 때만 props를 전달하는 방식이었는데, stack.navigator이 있는 컴포넌트에서 notice_list로 추가 props를 넘기려고 한다.

const [modalVisible, setModalVisible] = useState(false);

를 선언했던 컴포넌트에서 이 modalvisible과 setmodalvisible을 넘길 것이다.

<Stack.Screen 
        name="notice_detail"
        options={{
          title : '게시글 상세', 
          headerShown : true,
          headerRight: () => (
            <MenuProvider>
              <TouchableOpacity onPress={() => {setModalVisible(true)}}>
                <Icon name="menu" size={30} color="#000" style={{ marginRight: 10, marginTop: 10 }} />
              </TouchableOpacity>
            </MenuProvider>
          ),
        }} 
      >
        {props => <Notice_detail {...props} modalVisible={modalVisible} setModalVisible={setModalVisible} />}
      </Stack.Screen>

위처럼 stack.screen 사이에

 {props => <Notice_detail {...props} modalVisible={modalVisible} setModalVisible={setModalVisible} />}

이걸 추가하고

const Notice_detail = ({ route, modalVisible, setModalVisible }) => {
머시기머시기
}

notice_list에 props를 추가해주면 Notice_list에서 modalVisible과 setModalVIsible을 사용할 수 있다 !!