이번 프로젝트에서 Stack과 Tab 이렇게 2가지 네비게이션을 사용했다.
내가 상상한 그림은 이렇다.
그런데 상상과 달리 Error가 발생했는데, 핵심은 Detail이라는 Screen이 없다는 것이었음.
Tab과 Stack을 묶어놓은 Root 파일, Tab 파일, Stack 파일을 차례로 확인하고 BookBox에서 코드 로직이 멀쩡한지 확인까지 해봤는데, 에러를 잡을 수 없었다.
그렇게 1시간 30분이 흐른 뒤에야 나는 드디어 에러 원인을 발견한다.
Screen name을 'stack'이라고 해놨는데 내가 아래 코드처럼 'Stack'이라고 오타를 내서 그랬던 것.
const { navigate } = useNavigation();
const handleMoveDetail = () => {
navigate('Stack', {
screen: 'Deatil',
})
}
// screen name과 100% 똑같이 stack으로 수정해주었다.
const { navigate } = useNavigation();
const handleMoveDetail = () => {
navigate('stack', {
screen: 'Deatil',
})
}
ㅋ...
뭐가 잘못됐는지 인지를 못 하면 바로잡을 수가 없는데, 이렇게 부지불식 간에 일어나는 손가락 에러는 정말 알아차리기 어렵다.
오늘의 인사이트가 있다면, 뭐가 잘못됐는지 정말 모르겠을 때는 가장 먼저 너 자신을 의심해라, 이다. 너의 손가락은 오타를 내게 되어 있다, 이다.