React Native ] Navigation 알아보기

* react navigate -> 6.x 버전이 관리되는 버전임
5.x랑 6.x은 사용 함수부터 차이가 있으니, 버전에 맞게 문서를 확인하면 좋을것같습니다.

ex ) 

5.x
createStackNavigator

6.x
createNativeStackNavigator

 

---

해당 문서는 5.x 기준으로 확인한것

화면간 이동

일반적 이동 : navigation.navigate
스택 쌓기 : navigation.push
뒤로가기 : navigation.goBack
첫번째 화면 : navigation.popToTop 

• navigation.navigate('RouteName')스택에 아직 없는 경우 새 경로를 스택 탐색기에 푸시하고, 그렇지 않으면 해당 화면으로 이동합니다.
  • 이전에 왔던 곳으로 돌아갈 수 있음. 스택이 다시 쌓이는것이 아니라 그 시점으로 돌아가면서 스텍에 쌓인 스크린을 제거하는게 포인트

설명 잘 되어있는 곳 :  https://velog.io/@hye_rin/ReactNavigation-%EB%82%98%EB%A7%8C-%EB%AA%B0%EB%9D%BC-navigate%EB%9E%91-push-%EC%B0%A8%EC%9D%B4%EC%A0%90

[ReactNavigation] 나만 몰라 navigate랑 push 차이점 🫠

---

params

1. 세팅값은, 화면에 자체에 표시될 내용이 아닌, 구성하는 정보를 포함해야한다.

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

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

2. 여러 페이지에 쓰이는 정보는, params보단 전역으로 세팅

사례 :
1. 조회하고자하는 개체 ID
2. 데이터 정렬, 필터링 등을 위한 매개변수
3. 타임 스템프, 페이지용 커서
4. 무언가 구성을 채울때

1, 4번 뭐가 다른걸까

• ID만 전달할 때: 주로 엔터티(예: 사용자)를 식별하고 해당 엔터티에 대한 상세 정보를 중앙 소스에서 가져오려는 경우 사용됩니다.
• 화면 입력란 채우기 위해 데이터 전달: 전체 화면에 대한 상세 데이터가 아니라 특정 UI 구성 요소의 초기값을 제공하려는 경우 사용됩니다.

-> 4번이 고민되었던 이유는 docs에서 예시로, 게시물 작성 > 뒤로가기에 새로 생성한 게시글 업데이트를 params를 담으라는 내용이 있어서였는데, 게시글이 길어질경우에도 담으라는건가? 이부분을 고민했었는데. 지선생말대로라면 이정도는 아닌것같다.
요런 경유엔 전역 상태로 수정하려는 데이터 저장하고, 수정할경우 해당 부분 수정 -> 반영해서 바로 보여줄 수 있는방법이 어떨까 생각해본다.

---

Header

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

options 속성은 navigation, route 가 있습니다.

• navigation 객체
  
  • 역할: navigation 객체는 화면 간의 전환 및 네비게이션 관련 기능을 제공합니다.
  • 사용: 주로 다른 화면으로 이동하거나, 스택 내에서의 뒤로 가기, 전달된 파라미터 가져오기 등과 같은 네비게이션 기능을 수행할 때 사용됩니다.
• route 객체
  • 역할: route 객체는 현재 화면에 대한 정보를 제공합니다. 이 객체를 통해 현재 화면의 파라미터, 네비게이션 옵션 등에 접근할 수 있습니다.
  • 사용: 현재 화면의 상태나 정보에 접근하고자 할 때 사용됩니다.

/* Inside of render() of React class */
<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

navigation으로 params 업데이트 가능

navigation.goBack 으로는 params를 전달할 수 없으니 다른 방법으로 전달해야함.