useNavigation vs props

🔎 1. props로 받는 방식

type Props = {
  navigation: RootNavigationProp<'Login'>;
};

const LoginScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <Button title="Go Main" onPress={() => navigation.navigate('Main')} />
  );
};

✅ 장점

• 타입이 명확하고 자동 완성이 잘 됨
• 스크린 컴포넌트에서는 기본적으로 navigation, route를 props로 받는 게 React Navigation의 원래 설계
• 협업 시 "이 컴포넌트는 네비게이션이 필요하다"는 게 코드 시그니처에 드러남

❌ 단점

• props drilling 가능성 (중첩된 UI 컴포넌트에서 navigation이 필요하면 계속 내려줘야 함)

---

🔎 2. useNavigation() 훅 사용

const LoginButton = () => {
  const navigation = useNavigation<RootNavigationProp<'Login'>>();

  return (
    <Button title="Go Main" onPress={() => navigation.navigate('Main')} />
  );
};

✅ 장점

• 훨씬 간단하고, 어디서든 바로 쓸 수 있음
• 하위 컴포넌트에서도 props 안 내려주고 직접 navigation 접근 가능
• 코드가 짧고 간결

❌ 단점

• 타입 지정 안 하면 any가 되어버림 → 항상 제네릭 필요
• navigation 의존성이 코드 시그니처에 안 드러남 → 협업 시 숨겨진 의존성처럼 느껴질 수 있음

---

🚀 정리

• 화면(Screen) 컴포넌트 👉 props 방식 권장 ({ navigation, route }) 이유: 네비게이션이 있는 게 당연하고, 타입 안전성이 높음
  
• 하위 UI 컴포넌트 (예: Button, Modal 등) 👉 useNavigation() 사용 이유: props로 navigation 계속 내려주면 번거롭고, UI가 네비게이션 의존하는지 안 보이는 게 더 깔끔할 때가 많음