[React-Native] 15. useNavigation을 이용해 data 넘기기

1. useNavigation을 이용해 데이터 넘기는 방법

우선 useNavigation을 사용하려면 @react-navigation/native가 설치가 되어야 한다.

설치되어있다 생각하고 진행하면

useNavigation을 불러온다.

// test.js
import { useNavigation } from '@react-navigation/native';

const Test = () => {
  const navigation = useNavigation()
  
  
  return(
    <View>
    	<Text>테스트입니다.</Text>
    </View>
    )
}

export default Test

useNavigation사용방법은 navigation.navigate(component명)으로 사용한다.

이때 component명은 app.js에서 <NavigationContainer>에 하위 컴포넌트로 Stack.Screen의 name으로 등록이 되어 있어햐 한다.

props로 data를 넘기기 위해서 navigate함수에 두번째 인자로 data를 객체 형태로 넣어준다.

예시

navigation.navigate(component명, {보내고 싶은 데이터 : 내용})

이를 적용하면

import { useNavigation } from '@react-navigation/native';

const Test = () => {
  const navigation = useNavigation()
  
  const onClick = () => {
  	navigation.navigate('signIn', {id : "min"})
  
  }
  
  return(
    <View>
    	<Pressable onPress={onClick}>
    		<Text>테스트입니다.</Text>
    	</Pressable>
    </View>
    )
}

export default Test

onClick이라는 함수를 만들어서 내부에 navigation.navigate('signIn', {id : "min"})를 넣어줬다.

이제 onClick이라는 함수가 실행이 되면 signIn컴포넌트에 {id : "min"}이 넘어간다.

이때 signIn컴포넌트에서는 props로 받아야 하는데

// signIn.js

const SignIn = ({route}) => {

  return (
    <View>
    	<Text>{route.params.id}</Text>
    </View>
}
export default SignIn

signIn페이지에서는 프롭스로 route를 받아주어야 한다.

그냥 props로 받아서 props.route로 받거나 구조분해할당을 통해서 route로 받아도 된다.

아무튼

route.params를 콘솔에 찍어보면

{id : "min"}

이 뜨게 되며 객체처럼 사용하면 된다.