StackNavigator

우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어줍니다.

이렇게 만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 모조리 등록시켜서, 언제든지 이 페이지 이동이 가능하게끔 해줍니다

페이지는 Stack.Screen 이라 부르며
전체 책은 Stack.Navigator라 부른다

StackNavigator.js

기본 구조

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';

//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';

//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();


const StackNavigator = () =>{
    return (

        <Stack.Navigator>
            {/* 페이지로 사용할 페이지를 여기에 넣는다*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>
    )
}
//다른 곳에서 쓸 수 있도록 추출한다
export default StackNavigator;

Mainpage.js

{cateState.map((content,i)=>{
 return (
 // map 함수를 돌리기 위한 기본 조건인 key=[i]는 동알하게 들어감
 // content는 걍 style처럼 스택에서 활용할 수 있는 기능 중 하나이고
 // 중괄호 안에 있는 content는 value값을 의미함

 <Card content={content} key={i} navigation={navigation}/>)
})
}