react navigation 배우기 3부 - 파라미터 넘겨주기

https://reactnavigation.org/docs/params

https://reactnavigation.org/docs/params/

1. 파라미터 념겨주는 방법

앞서 2부에서 페이지를 이동할 때 파라미터를 넘겨주는 법에 대해서 배우기로 약속했었다.

 

페에지를 이동할 때 파라미터를 넘겨주는 방법은 다음과 같다.

 

• navigate나 push의 메소드에 두번째 파라미터로 오브젝트 형태로 전달한다
  navigation.navigate('Route네임', { /* 파라미터 자리 */ })
• 파라미터를 읽는 스크린은 route.params를 통해 접근한다

 

공식문서는 params들이 JSON-serializable 하는것이 좋다고 한다. 즉, 경로 및 매개 변수에 함수, 클래스 인스턴스 또는 재귀 데이터 구조가 없어야 한다. 그래야 딥링킹을 구현할수 있다나 뭐라나... 딥링킹 페이지

 

(모바일에서의 딥링킹 - 사용자가 웹 페이지 또는 다른 앱에서 URL을 클릭하면 앱을 실행하고 특정 페이지를 여는 기술)

 

flutter 공식문서에서는 seriallization(직렬화)를 다음과 같이 설명하고 있다

 

인코딩과 직렬화는 동일한 것으로, 데이터 구조를 문자열로 변환합니다. 디코딩과 역직렬화는 문자열을 데이터 구조로 바꾸는 반대 과정이다. 그러나 직렬화는 일반적으로 데이터 구조를 더 쉽게 읽을 수 있는 형식으로 변환하는 전체 프로세스를 의미하기도 한다.

 

대충 json으로 바꿀수 있는 형태를 말한다.

 

 

 

테스트하기

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

 

 

 

2. 파라미터 업데이트하기, 초기값 주기

스크린은 route.params의 파라미터를 업데이트 할 수 있다. 기억할 것은 이건 마치 리액트의 setState처럼 동작한다.

즉 스크린이 리렌더링 된다는것!

navigation.setParams({
  query: 'someText',
});

예제코드 확인하러 가기

 

단 주의사항이 title같은 옵션은 setParams를 사용하지 말고 setOptions를 사용하라고 권장한다.

 

 

 

스크린의 params에 초기값을 주는 방법은 다음과 같이 스크린을 생성할 때 initialParams라는 prop으로 넘겨주면 된다

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

 

 

 

 

3. 이전페이지에 파라미터 넘겨주기

이전페이지에 파라미터를 넘겨주려면 goBack을 써주어야 할 것 같지만 goBack메소드는 파라미터를 받지 않는다.

 

실제로는 navigate를 메소드를 써야 된다.

 

navigate의 메소드의 경우, 호출한 스크린이 stack에 이미 쌓여 있으면, 그 스크린 위에 있는 스택들은 전부 pop 해버리고 해당 페이지로 돌아간다. 즉 스크린 A -> B -> C -> D 상태에서 B스크린으로 navigate 하면 결과는 A -> B 가 된다는 것이다.

 

 

테스트하러가기

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

 

 

 

4. 네스팅된 네비게이터에 파라미터 넘겨주기

만약에 네비게이터안에 네비게이터가 네스팅 되어있다면 좀 다른 형태로 파라미터를 제공해주어야 한다

첫번째 인자에는 네스팅된 네비게이터의 이름을 넣어주고, 두번째 param에는 screen의 이름과 전달할 params를 전달해주면된다.

아래의 예제는 Account라는 네스팅된 네비게이터안에 Settings 스크린에 param을 전달하는 예제이다.

navigation.navigate('Account', {
  screen: 'Settings',
  params: { user: 'jane' },
});

 

 

 

5. 파라미터를 넘겨줄 때 주의사항

공식문서에서 파라미터를 넘겨줄때 다음 사항을 반드시 숙지하라고 한다.

 

• 스크린에 넘겨주는 파라미터는 화면의 구성에 대한 최소한의 데이터만을 포함해야 한다

예를들어 어떤 프로필 페이지에 id만 필요하다고 가정하자. 아래처럼 user오브젝트를 통쩨로 넘겨주지 말고

// Don't do this
navigation.navigate('Profile', {
  user: {
    id: 'jane',
    firstName: 'Jane',
    lastName: 'Done',
    age: 25,
  },
});

 

아래처럼 필요한 데이터만 전달하라고 한다

navigation.navigate('Profile', { userId: 'jane' });

 

이유는 전자처럼 하면 여러가지 버그가 발생한다고 한다