[JAVASCRIPT 공부일지] 3주차 - 3 (앱 페이지 - 네비게이터 (Navigator))

리액트 네이티브로 앱개발을 하면서, 다양한 페이지를 구현했지만 그 페이지들 간의 이동에 대해서는 아직 구현하지 못했었습니다. 리액트의 네비게이터 기능을 이용하여 페이지 간 이동에 대해서 공부해보고자 합니다.

---

<앱 페이지 적용 - 네비게이터란?>

네비게이터?
: 페이지 끼리 이동할 수 있게끔 만드는 것으로, 웹 사이트를 이용하듯 앱에서 만든 컴포넌트들을 페이지화 시켜주고,
해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다.
ex) 가로방향으로 슬라이드 했을 때 다음페이지로 넘어가는 기능이 포함됩니다.

cf) React Navigation 공식문서에서 정말 좋은 기능들을 가져다 쓸 수 있습니다.
https://reactnavigation.org/

1. React Navigation 공식문서의 installation 에는
npm과 Yarn 설치방식 두가지가 있는데, Yarn을 통해서 설치해보겠습니다.

2)
yarn add @react-navigation/native

3) 
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

설치했음에도
3-1) Unable to resolve module @react-navigation/native from... 오류 발생 혹은
3-2) node 버전 12관련 문제 발생 시
(해결방법)
라이브러리 호환 문제 해결을 위해 현재 설치된 노드의 버전이 12 버전일 경우,
LTS 버전인 16 버전을 설치하여 해결할 수 있습니다.
https://nodejs.org/ko/download/

4) 여기까지 페이지 이동기술을 위한 가장 기초적인 도구 설치완료
>> 그 외 추가적인 기능들 또한 설치해서 사용해야합니다. (ex. 스택 네비게이션)

---

<스택 네비게이션 (Stack Navigation) ?>
: 컴포넌트에 페이지 기능을 부여해주고, 컴포넌트에서 컴포넌트로 이동(= 페이지 이동)을 가능하게 해줍니다.
: 페이지를 스택처럼 쌓는 기능입니다.

>> 스택 네비게이션에서
페이지는 Stack.Screen이라 부르며
책갈피는 Stack.Navigator라 부릅니다.
ex)
 책갈피</stack.navigator ... >
 페이지</stack.screen ... >

<스택 네비게이션 설치>
1. yarn add @react-navigation/stack

2. vscode 내에 페이지 이동만 다루는 폴더를 하나 만듭니다.
(navigation)

3. 스택네비게이션 사용

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();
// 스택네비게이션이 반환하는 것을 Stack 변수에 넣는다

---

StackNavigator.js 전체코드

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

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


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


const StackNavigator = () =>{
    return (

        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "white",
                    borderBottomColor: "white",
                    shadowColor: "white",
                    height:100
                },
                //헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
                headerTitleAlign:'left',
                headerTintColor: "#000",
                headerBackTitleVisible: false
            }}
            
        >

            {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
            <Stack.Screen name="AboutPage" component={AboutPage}/>
            <Stack.Screen name="LikePage" component={LikePage}/>
        
        </Stack.Navigator>
    )
}

export default StackNavigator;

** <Stack.Screen name="MainPage" component={MainPage}/>
: 컴포넌트 부분에 만든 페이지를 달아주고, name으로 이름을 지정해줍니다.
이 name은 어플상에서 페이지 상단에 실제로 노출되는 부분입니다.
: 가장 처음 쓰이는 페이지가 가장 처음 출력되게됩니다.

** export default StackNavigator; 
: 맨 마지막 부분의 코드로 밖에서 쓸 수 있게끔 내보내지고있습니다.

** headerTintColor
글씨 값이므로 이 값만 black으로 바꿔주시면 흰 배경에 검은 글씨로 출력되게됩니다.

** headerTitleAlign:'left'
이 글씨를 왼쪽정렬 시킬 수도 있습니다.

cf) 
https://reactnavigation.org/docs/getting-started/ 에 검색하여 더 필요한 기능을 찾아볼 수 있습니다.

---

<실습>

1. App.js에 스택 네비게이션 적용
기존에는 App.js 에서 MainPage, 다른 페이지들을 리턴하는 코드가 있었는데,
이를 스택 네비게이션이 대체하여

// App.js

import StackNavigator from './navigation/StackNavigator'
//스택네비게이터를 가져온 것입니다.

return (
<NavigationContainer>
<StatusBar style="balck"/>
<StackNavigator/>
</NavigationContainer>

2. MainPage.js에서 네비게이터 적용

navigation.navigate("DetailPage")
// 이 코드가 가장 중요한 실제 해당 페이지로 이동해주는 함수, 
// Stack.screen 상에서 name속성으로 정해준 이름으로 이동시켜줌

navigation.navigate("DetailPage",{title:title;})
// 데이터도 전달시킬 수 있음

전체적으로 보면

// MainPage.js

<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',content)}}>
</TouchableOpacity>
// 요소를 눌렀을 때 DetailPage로 넘어가게 만들 수 있음
// 여기서 두번째 인자로 데이터까지 넘겨줄 수 있음

>> content를 넘겨주어 리스트마다 컨텐츠가 다르므로 그 자체(하나의 딕셔너리)를 
한번에 DetailPage로 넘겨주는 것입니다.

3. DetailPage에서는 MainPage로부터 전달받은 데이터를 사용해서 DetailPage에 새로 뿌려주어야합니다.

export default function DetailPage({navigation,route}) { }

>> 만약 페이지에서 로딩화면을 구현하지 않을경우, 초기 상태값으로 의미없는 값이라도 부여해주어야합니다.
이러한 초기 데이터가 없는 경우에는 데이터를 새로 불러와야하므로 지연시간(로딩화면 구현)을 주어야합니다.
>> 따라서 로딩화면을 그려줄지, 초기값을 미리 세팅해놓을지를 선택해주는 판단도 필요합니다.

4. MainPage에서 어떤 데이터들이 넘어오는지 콘솔창에서 결과값으로 확인

useEffect(()=>{
console.log(route)
// 넘겨받은 값을 콘솔창에서 확인할 수 있습니다.

5. 넘겨받은 값으로 값 업데이트

const [tip, setTip] = useState({ ...})

navigation.setOptions({ //setOptions로 페이지 타이틀도 지정 가능하고
            title:route.params.title, //StackNavigator에서 작성했던 옵션을 다시 수정할 수도 있습니다. 
            headerStyle: {
                backgroundColor: '#000',
                shadowColor: "#000",
            },
            headerTintColor: "#fff",
        })
        setTip(route.params) // 넘겨받은 데이터를 새롭게 바꿔주는 과정입니다.

setTip 함수 : 상태 데이터를 바꾸는 함수이름
tip : 상태변수

---

<Expo 기능 - 공유기능과 외부링크 클릭 이벤트>

<공유기능>

1. React-native에서 기본적으로 공유하는 기능을 제공해줍니다.

2. 공유하기 버튼을 넣을때 페이지에 버튼을 추가하고, 

3. TouchableOpacity 버튼의 onPress에 share() 함수를 만들어 추가

4. share함수는 
Share.share()로 이루어지는데 Share는 이미 리액트네이티브에서 제공하는 기능입니다.

---

<외부링크 클릭 이벤트>
: Linking 입니다.
: 더 자세히 보러가기

1. 도구 설치
expo install expo-linking

2. link() 함수를 onPress로 불러오고,

3. Linking.openURL(" ") 안에 주소를 넣으면
외부링크를 누르게됐을때 그 링크가 불러와지게 됩니다.

---

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.