리액트 네이티브 앱 만들기 3 리액트 내비게이션 라이브러리 설치

이번 게시글에는 리액트 내비게이션에 관한 내용이 주 다.

앱 만들기 영상을 참고하다가 꽤 내용이 맘에 들어서 따라 했는데 리액트 내비게이션에 관한 내용이었다.

리액트 내비게이션이 뭔지도 모르고 따라 했다가 궁금해서 블로그 글을 읽고 정리해 보았다. 참고 블로그 링크도 걸어두었다.

아직 허공에 떠다니는 글자 같지만 필요해서 사용하게 되면 그때 제대로 이해하게 되겠지.

 

리액트 네비게이션 라이브러리는 리액트 내비게이션을 쉽게 관리할 수 있도록 도와준다.
내비게이션 종류는 stack navigation / tab navigation / drawer navigation 세 가지가 있다.
리액트 네비게이션에는 NavigationContainer 컴포넌트, Navigator 컴포넌트, Screen 컴포넌트로 구성되어 있다.
NavigationContainer 컴포넌트는 내비게이션의 계층구조, 상태를 관리하는 역할을 하는 모든 내비게이션 구성요소를 감싼 최상위 컴포넌트다.
Navigator 컴포넌트는 화면관리하는 중간 관리자의 역할을 하며 여러 개의 Screen 컴포넌트를 자식으로 갖는다.
Screen 컴포넌트는 화면으로 사용되며, name과 component의 속성을 정해야 한다. name은 화면이름이 되고, component에는 화면으로 사용될 컴포넌트를 전달해야 한다. 항상 navigation과 route가 props로 전달된다.
stack 네비게이션은 가장 일반적으로 많이 사용되는 내비게이션이다. 화면 위에 다른 화면을 쌓는 계층구조로 화면을 이동하는 것이 특징이다. 이전화면을 계속 유지하고 가장 위 화면을 들어내면 이전 화면으로 돌아갈 수 있다.

리액트 네비게이션이 참고자료

 

 

 

 

 

리액트 네이티브를 설치하면 기본적으로 아래와 같은 내용(양식)을 담은 App.js 파일을 볼 수 있다.

터미널에 npm start > i 입력하여 아이폰 시뮬레이터를 실행시켰다.

내가 <Text> 태그 내용 고친 대로 시뮬레이터에 잘 출력이 된 것을 확인할 수 있다.

 

이번에는 리엑트 네비게이션이라는 것을 사용하는 유튜브 영상을 보고 따라 해보았다.

App.js 파일의 내용(양식)을 변경했다.

리액트 내비게이션    <-- 여기서 참고했다.

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

위 내용을 쫙 복사해다가 내 프로젝트 파일의 App.js 파일에 전체 붙여 넣기 한다.

 

붙여 넣기 후 시뮬레이터 작동시켜 보니 Syntax Error 에러가 떴다.

불러올 <NavigationContainer>도 없는데 왜 import 하느냐고 따져 묻는다.

 

 

리액트 내비게이션 라이브러리 설치를 해주면 된다.

외부 라이브러리라 따로 설치해주어야한다고 함.

터미널에 아래와 같이 입력한다. 

npm install @react-navigation/native-stack

 

내비게이션이 무엇인지 대략 공부한 후에 알았는데, 내가 설치한 것은 내비게이션 중에서도 스택 내비게이션이었다.

 

설치 완료!

 

이제 변경된 코드에도 시뮬레이터가 착하게 반응하는 것을 확인할 수 있다.

 

 

복붙 한 기본 양식을 변경해 주었다.

function HomeScreen을 복붙 하여 function DetailScreen으로 변경했다.

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Detail Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 
 

 

여기 아래서부터는 왜 이렇게 했는지 기억이 안 난다.... 유튜브 보고 따라다 하다. 기억이 안 난다.

라이브러리 설치. (라고 과거의 내가 왜 썼는지 기억이 안 남..)

 

fontSize: hp(4) 그대로 영상 보고 쳤는데, 시뮬레이터는 오류라고 이야기한다. 여기서부터 보던 유튜브 영상 버렸다.

전체적으로 리액트 네이티브 클론코딩을 한번 따라 하고 시작하는 것이 좋을 것 같다.

 

 

무튼 무료 API 찾아 쓰고 싶다면 아래 링크를 참고한다. 

무료 API
https://apipheny.io/free-api/

Free API - Huge List of Public APIs For Testing [No Key] - Apipheny

 

 

이후에 피그마로 앱 디자인 작업하고 있었다. 디자인대로 컴포넌트도 만들고 화면을 만들어나갈 계획이다.