이전에 컴포넌트를 만들 때 useState, useEffect와 같은 Hook 함수를 사용한 적이 있죠? Hook은 함수 컴포넌트에서 사용할 수 있는 유용한 함수라고 배웠는데요. 리액트 내비게이션에 관련한 Hook 함수도 있습니다. 참고로 여러 개의 Hook 함수를 칭할 때는 Hooks라고 부른답니다.

Screen으로 사용 중인 컴포넌트에서는 Props를 통해 navigation 또는 route 객체를 사용할 수 있습니다. 하지만 Screen으로 사용되지 않는 다른 컴포넌트에서는 navigation 또는 route를 Props로 받아와서 사용할 수 없죠.

예를 들어, MainScreen 컴포넌트 파일 안에 있는 HomeScreen에서 Detail 1 열기 버튼을 OpenDetailButton이라는 컴포넌트로 따로 분리해서 사용하고 싶다면, 다음 세 가지 방법을 통해 구현할 수 있습니다.

첫 번째 방법은 OpenDetailButton 컴포넌트에서 onPress 함수를 Props로 받아오는 것이죠.

screens/HomeScreen.js

(...)

function OpenDetailButton({onPress}) {
  return <Button title="Detail 1 열기" onPress={onPress} />;
}

function HomeScreen({navigation}) {
  return (
    <View>
      <Text>Home</Text>
      <OpenDetailButton onPress={() => navigation.push('Detail', {id: 1})} />
    </View>
  );
}

(...)