[React Native] navigation (매개변수 / params 사용)

Params

화면을 구성할 때 함께 전달되는 매개변수(parameters)를 말한다.

 

Params 사용하기

params를 사용하기 위해서는 두 가지 과정이 있어야 한다.

1. navigation.navigate() 함수의 두 번째 변수로 params를 전달해야 한다.

navigation.navigate('RouteName', { /* params go here */ })

params 는 JSON직렬화가 가능한 형태를 추천한다.

(보통 객체 형태로 전달한다)

2. Screen의 구성요소에서 params를 읽어야 한다.

function ScreenName({ route }) {
  /* route.params 으로 사용할 수 있다. */
}

 

params에 관련된 함수들

setParams()

params를 변경한다.

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

initialParams

params의 기초값을 설정해 매개변수를 따로 지정하지 않은 경우 사용하도록 한다.

Screen에서 설정한다.

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

navigate()

일부 데이터를 새 화면에 전달할 때 뿐만 아니라 이전 화면에 데이터를 전달하는 데 사용할 수도 있다.

(게시글 작성 페이지에서 게시글을 작성하고, 게시글에 대한 데이터 전달)

 

 

Params에 있어야 할 내용

React Native Navigation 의 Docs 페이지에서는 아래와 같이 최소한의 정보를 params 으로 사용할 것을 권장하고 있다.

출처 : https://reactnavigation.org/docs/params#what-should-be-in-params

화면에 URL이 있다고 생각하고, URL에 나타내면 안될 요소는 params로 전달하지 않는 것을 추천한다고 한다. 화면을 구성하는 최소한의 요소를 전달하고, 화면에 표시할 전체 데이터는 글로벌 저장소에 저장되어야 한다.

(ID만 전달하고, 글로벌 저장소에서 ID에 해당하는 전체 데이터를 가져와 화면에 표시)

 

 

참고한 페이지

https://reactnavigation.org/docs/params

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