최근에 오늘 좋지 않은 일이 있었다. 같은 팀원이었던 한 분이 개인사정 상 중도이탈을 하게 되었다.ㅠㅠ 그래서 팀 구성이 프론트엔드 1명, 백엔드 2명이 되어 프론트엔드를 같이 겸하면서 프로젝트를 진행하기로 하였다. 물론 프론트와 백을 같이 하면 지금보다 더 힘들겠지만 평소 프론트엔드도 꼭 해보고 싶었기 때문에 오히려 더 좋은 기회가 될 것이라고 긍정적으로 생각했다.
그래서 이번 로그는 react-navigation에 대해 다뤄보고자 한다. 먼저 React Native를 다루기 위해 필수적으로 알아야 할 개념인 Navigation에 대해 알아보도록 한다.
react-navigation이란?
먼저, react-navigation이란 React-native 애플리케이션의 네비게이션과 히스토리를 간단하게 관리할 수 있는 라이브러리다.
작년 2019년의 React-native의 네비게이션 라이브러리는 react-navigation이 인기가 많았다. 특징으로 대규모 개발에 용이하고 Redux와도 상성이 좋으며 Material design과도 대응하고 있기 때문에 관련된 정보가 많다는 점이다.
또한 이번 프로젝트에서는 Expo를 이용하여 프론트엔드를 구성하였기 때문에 react-navigation을 쓰지 않을 이유가 없다.
세팅방법에 대해서는 아래 공식문서를 참고하면 좋다.
(참고: https://reactnavigation.org/docs/en/4.x/getting-started.html)
네비게이션（스크린 이동）을 하기 위해서는 네비게이터를 만들어야 한다.
네비게이터는 크게 아래 세 종류의 기능이 있다.
- Stack Navigator: 일반적인 스크린 이동
- Tab Navigator: 탭으로 스크린 이동
- Drawer Navigator 드로어로 스크린 이동
Navigation과 스크린(컴포넌트) 이동
모든 컴포넌트에 navigation이라는 props가 전해진다. navigation의 장점인 navigate를 불러내는 것에 의해 이동할 수 있다.
onPress={() => this.props.navigation.navigate("Home")}위와 같이 "Home" 컴포넌트를 지정하면 해당 컴포넌트로 이동된다. 기본적으로는 container 컴포넌트에 이동기능을 정의해서 자식 컴포넌트에 props로 정의한 함수를 전달한다.
자식 컴포넌트는 부모 컴포넌트의 메소드를 사용하면 자식 컴포넌트에 this.props.navigation이 존재하지 않기 때문에 작동하지 않는다.
따라서 아래와 같이 사용하기 쉽게 해주면 좋다.
const {navigation} = this.props
const {navigate} = this.props.navigation
// 위와 같이 적으면 아래와 같이 사용하기 쉽게 쓸 수 있다.
onPress={() => navigation.navigate("Home")}
onPress={() => navigate("Home")}결론
이번 로그에서는 기본적인 react-navigation의 개념에 대해 알아보았다. 여기에서 가장 중요하다고 느낀 점은 네비게이션을 할 때, 스택을 바탕으로 스크린 이동이 이루어진다는 점이다. 그리고 react-navigation으로 만든 화면들은 createAppContainer로 감싸줘야 작동을 하므로 마지막에 export할 때 createAppContainer으로 처리하는 과정이 반드시 필요하다.
