스택네비게이션 - 페이지 이동하기

1. 페이지 이동 구현하기

Main페이지에서 카드를 클릭하는경우 상세 페이지로 이동하는! 일반적인 앱 에서 클릭함에 따라 화면전환이 되게 구현해보자.

 

페이지 이동을 위해서는 책갈피가 페이지들에게 부여된 페이지 기능을 사용해야한다.

Stack.Screen에 등록된 모든 컴포넌트 페이지들은 navigation 과 route라는 딕셔너리(객체)를 속성으로 넘겨 받아 사용 한다.

 

* navigation 객체는 setOptions 와 navigate 함수를 가지고 있다.

  - setOptions : 해당페이지의 제목&디자인 등을 수정할 수 있다. 

  - navigate : Stack.Screen에서 name속성으로 정해준 이름으로 지정하면 해당 페이지로 이동할수있게해주는 함수 

 

위와같이 name 속성을 전달해주고, 두번째 인자로 딕셔너리 데이터를 전달해주면 Detail 페이지에서 두번째 인자로 전달된 데이터를 route 딕셔너리로 받을 수 있다.

 

navigation.navigate("DetailPage",{   

    title: title

}) 

위와 같이 두번째 인자로 전달하여 받은 데이터는 비구조할당방식으로 params 객체 키로 연결되어 필요한 데이터만 꺼내 사용할 수 있다. 

 

※ 딕셔너리 데이터 형태

  {   

      route : {    

         params :{     

             title:title    

                     }   

                 }  

    }

 

이걸 비구조할당방식으로 필요한 정보만 아래와같이 꺼내서 사용할 수 있다.

const { title} = route.params;

 

2. 데이터 없이 페이지 이동하기

navigation.navigate("DetailPage")

 

▶ 메인화면에서 card.js 로 페이지 이동을 위해 navigation={navigation} 전달한다. 

▶ card.js 에서  onPress={()=>{navigation.navigate('DetailPage')} 로 Stack.Screen에 등록된 name 으로 연결해준다.

 

 

3. 데이터를 가지고 페이지 이동하기

navigation.navigate("Detail",{   

      title: title

})

 

버튼카드에서 위와같이 두번째 인자로 데이터를 전달하면 이동 한 페이지에서 넘겨준 데이터를 받을 수 있다.

 

▶MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용

   export default function Card({content,navigation}){ 

    ...

   onPress={()=>{navigation.navigate('DetailPage',content)}}>  
 

content는 내가 어떤 카드를 클릭했는지 알아야 상세페이지를 보여줄 수 있으므로 두번째 인자로 content 같이 전달을 해준다.

navigation에 속성을 전달받아 Card.js에서 사용을 할 수 있다.

 

▶ DetailPage.js 에서 export default function DetailPage({navigation,route}) {  ...

 

   - Card.js에서 navigation.navigate 함수를 쓸때 두번째 인자로 content를 넘겨주고

     content는 딕셔너리 그 자체였으므로 route.params에 그대로 넘어온다.  즉, route.params 는 content다.

 

이제 UseEffect()에서 화면이 그려지고 가장먼저 실행되는 함수로 setTip(route.params)을 세팅해준다면 

route.params는 content 자체이기때문에 useState() 에 content로 상태를 업데이트하고 화면을 다시 그려주게 된다.

 

건네 받은 값을 꺼낼 땐, 책갈피가 navigation 과 추가적으로 건네준 route 에서 꺼내 확인 할 수 있습니 다. 
route.params 객체에 건네준 딕셔너리가 넘겨 있습니다!