React Navigation 5에서 탭 네비게이터에 Params 전달하는 방법

React Navigation 5에서 Tab Navigator에 매개변수 전달하기

React Navigation 5에서 materialTopTabs를 사용하는 경우, 탭 내비게이터 내의 여러 화면에 매개변수를 전달하는 문제가 발생할 수 있습니다. 기본적으로 내비게이터가 마운트될 때 모든 화면이 로드되어 각 화면에 다른 매개변수를 전달하기가 어려울 수 있습니다. 하지만 이러한 제한을 극복하고 원하는 화면으로 효율적으로 매개변수를 전달하기 위해 몇 가지 접근 방식이 있습니다.

접근 방식 1: React Context 사용하기

탭 내비게이터 화면에 매개변수를 전달하기 위해 React Context를 사용할 수 있습니다. 먼저, 별도의 파일을 만들고 React.createContext()를 사용하여 컨텍스트를 정의합니다. 이 컨텍스트를 통해 내비게이터와 화면 사이에서 매개변수를 공유할 수 있습니다.

<script type="text/babel">
  import React from 'react';

  export const NetworkContext = React.createContext();
</script>

다음으로, 매개변수를 컨텍스트에 제공하기 위해 <NetworkContext.Provider> 컴포넌트로 탭 내비게이터 컴포넌트를 감싸세요. 필요한 매개변수를 route.params 객체를 통해 전달하세요.

<script type="text/babel">
  import { NetworkContext } from './context';

  const PostsTabNav = createMaterialTopTabNavigator();

  const PostsMainNav = ({ route }) => {
    return (
      <NetworkContext.Provider value={route.params.network}>
        <PostsTabNav.Navigator>
          ...
        </PostsTabNav.Navigator>
      </NetworkContext.Provider>
    );
  };
</script>

화면 컴포넌트 내에서 제공된 컨텍스트를 사용하여 매개변수를 접근할 수 있습니다.

<script type="text/babel">
  import React from 'react';
  import { NetworkContext } from './context';

  const NetworkPostsScreen = () => {
    const network = React.useContext(NetworkContext);

    // 네트워크 매개변수 사용하기
  
    ...
  };
</script>

이 접근 방식을 사용하면 탭 내비게이터 화면에서 필요한 매개변수를 전달하고 접근할 수 있습니다.

접근 방식 2: 초기 매개변수 설정하기

탭 내비게이터 화면에 매개변수를 전달하는 또 다른 접근 방식은 초기 매개변수를 설정하는 것입니다. 이를 위해 탭 내비게이터 내 각 화면 컴포넌트의 initialParams 속성을 통해 매개변수를 전달할 수 있습니다.

<script type="text/babel">
  const PostsTabNav = createMaterialTopTabNavigator();

  const PostsMainNav = (props) => {
    const temp = props.route.params.network;
    return (
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen
          name="NetworkPosts"
          component={NetworkPostsScreen}
          initialParams={{ network: temp }}
        />
        <PostsTabNav.Screen
          name="NetworkUsers"
          component={NetworkUsersScreen}
          initialParams={{ network: temp }}
        />
        ...
      </PostsTabNav.Navigator>
    );
  };
</script>

이런 식으로 초기 매개변수를 설정함으로써 탭 내비게이터 내 각 화면은 필요한 매개변수를 받게 되며, 따라서 이를 그에 맞게 사용할 수 있게 됩니다.

결론

이 블로그 포스트에서는 React Navigation 5를 사용하여 탭 내비게이터 내의 화면에 매개변수를 전달하는 두 가지 다른 접근 방식을 살펴보았습니다. React Context를 활용하거나 초기 매개변수를 설정함으로써 각 화면에 필요한 매개변수를 효율적으로 전달하고 접근할 수 있습니다. React Navigation 앱의 기능을 향상시키는 데 가장 적합한 방식을 선택하세요.

자세한 내용과 고급 시나리오에 대해서는 공식 React Navigation 문서의 추가 속성 전달을 참조하세요.

참고 자료 : 

reactjs