제목: React Native Navigation에서 ‘undefined is not an object’ 오류 해결하기
소개
React Native를 사용하고 있는데 네비게이션을 위해 react-navigation 라이브러리를 사용하다면, “undefined is not an object (evaluating ‘_this2.props.navigation.navigate’)”라는 오류 메시지를 만나게 될 수 있습니다. 특히, 하나의 컴포넌트에서 네비게이션을 올바르게 설정했지만 다른 컴포넌트에서 문제가 발생하는 경우, 이 오류는 귀찮을 수 있습니다. 이 블로그 포스트에서는 이 오류를 해결하기 위한 몇 가지 가능한 솔루션을 살펴보겠습니다.
문제 파악
“undefined is not an object” 오류는 this.props.navigation 객체가 컴포넌트에서 접근할 수 없을 때 발생하며, 자바스크립트 오류를 유발합니다. 이는 네비게이션 프롭이 자식 컴포넌트로 제대로 전달되지 않았거나 컴포넌트가 네비게이션 스택에 등록되지 않았을 때 발생할 수 있습니다.
솔루션 1: 네비게이션 프롭 전달하기
react-native-scrollable-tab-view와 같은 추가적인 네비게이션 라이브러리를 사용하는 경우, 탭 네비게이션을 통해 네비게이션 프롭을 전달하는 것이 중요합니다. 예를 들어, 아래 코드 스니펫에서:
{'<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda" />'}네비게이션 프롭을 명시적으로 전달하여 CalendarScreen 같은 자식 컴포넌트에서 네비게이션 객체에 접근하고 navigate와 같은 함수를 사용할 수 있도록 보장합니다.
솔루션 2: 화살표 함수 이용하기
일부 경우에는 화살표 함수를 사용하면 네비게이션 관련 문제를 해결할 수 있습니다. 기존의 renderHeader() 문법 대신 아래와 같이 화살표 함수를 사용하세요:
{'renderHeader = () => {'}
{'// 헤더 렌더링을 위한 코드'}
{'}'}화살표 함수를 사용하면 this 키워드의 올바른 바인딩이 보장되어 컴포넌트 내에서 네비게이션 프롭에 접근할 수 있습니다. 이 변경으로 “undefined is not an object” 오류를 해결할 수 있을 수도 있습니다.
솔루션 3: 컴포넌트 등록하기
새로운 컴포넌트를 추가하고 네비게이션 문제가 발생하는 경우, 앱 내비게이터에 컴포넌트가 등록되지 않았을 수 있습니다. 반드시 컴포넌트를 StackNavigator 구성에 포함시켜야 합니다. 예를 들어:
{'const SimpleApp = StackNavigator({'}
{'Home: { screen: HomeScreen },'}
{'New: { screen: NewScreen }, // 이 부분 추가'}
{'});'}컴포넌트를 앱 내비게이터에 등록하면 네비게이션 프롭을 받고 필요한 네비게이션 함수에 접근할 수 있게 됩니다.
결론
React Navigation을 사용할 때 “undefined is not an object” 오류가 발생하는 것은 귀찮을 수 있습니다. 그러나 네비게이션 프롭이 올바르게 전달되었는지, 화살표 함수를 사용하고 모든 필요한 컴포넌트가 등록되었는지 확인함으로써 이 문제를 해결하고 React Native 앱에서 원활한 네비게이션을 가능하게 할 수 있습니다.
이 블로그 포스트에서 제시된 솔루션을 따르면 React Native 네비게이션에서 발생하는 “undefined is not an object” 오류를 해결하고 어떠한 문제 없이 화면 간에 네비게이션할 수 있게 됩니다.
