[실습 ✍️] 적용 컴포넌트마다 다르게 적용할 수도 있고, 앱 전체에 공통적으로 적용할 수 있습니다. StatusBar를 컴포넌트 각각 다르게 둘 수 있습니다 우린 MainPage.js에 달아볼거에요! expo statusbar 도구 설치 StatusBar를 ScrollView 사이에 넣어놓고 style을 black으로 주어서 색을 표시하게끔 해놨다!
style이 light일 때와, black일 때가 다릅니다. 우린 앱 화면 배경색을 검은색으로 설정했기 떄문에, 상태바를 black으로 하면 보이지 않습니다.
네비게이션이란? 앱에 페이지 개념을 입혀주고! 웹 사이트를 이용하듯, 앱에서 여러분들이 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다 물론 이것 또한 쉽게 페이징을 도와주는 외부 라이브러리를 가져다가 사용합니다. react-navigation 공식문서 보러가기 —> [(링크)](https://reactnavigation.org/)결국 이 라이브러리도 Expo에서 지원하고 있는 도구로써, 앱을 만들기 위해 사용 중인 Expo와 궁합이 아주 잘 맞습니다. 이번 강의에선 앱 내의 페이지 구성 및 이동까지 직접 적용해볼 텐데요, 이 라이브러리는 다양한 기능들을 가지고 있습니다. 가령 아래에 있는 화면과 같이, 앱 하단에 탭 버튼을 두고 해당 버튼을 누르면~ 연결되어 있는 페이지로 바로바로 이동할 수 있게 해주는 기능(열 앱에서 많이 보셨죠?)도 가지고 있습니다. 따라서 이번시간에 같이 공부한 다음 틈틈히 다른 기능들도 적용해보세요!
현재 갖추고 있는 페이지 구성 확인! 페이지 구성은 보통 pages 폴더 안에 생성해둔 컴포넌트로 구성합니다. 우리는 이미, 1. MainPage.js 메인 페이지 2. DetailPage.js 상세 화면 페이지 3. AboutPage.js 소개화면 페이지 까지 총3 페이지를 가지고 있습니다.
기본 설치 코드 리액트 네이티브에서 페이지 네비게이션을 구현하기란 조금 까다롭습니다. 그래서 딱 우리에게 필요한 것만 가져와 설치 하고, 적용해 나갈 계획입니다.
우리에게 필요한 것이라고 했지만, 거의 대부분의 앱에 적용이 되어 있는 것들만 가져왔습니다.
아래 명령어들은 네비게이션을 사용하기 위해 필요한 기본 라이브러리들이구요! 우리가 곧 배울 스택 네비게이션와 탭 네비게이션 기능은 추가적으로 라이브러리를 또 설치 해줘야 합니다 😂
아래 명령어를 차례차례 터미널에 넣어 실행해주세요 가장 마지막줄은 꽤 깁니다. 이렇게 여러 라이브러리들을 띄어쓰기로 연결해서 한번에 설치 할 수도 있습니다
프로젝트 별로 관리가 되기 때문에 새로운 프로젝트를 만드시면 거기에 추가적으로 설치를 해주셔야 합니다!
**네비게이션 설치 코드
스택 네비게이션이란? 스택 네비게이션은 컴포넌트에 페이지 기능을 부여해주고 컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해줍니다 컴포넌트를 페이지화 시키는 스택 네비게이션은 다음과 같습니다. 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어줍니다.
이렇게 만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 모조리 등록시켜서, 언제든지 이 페이지 이동이 가능하게끔 해줍니다
페이지는 Stack.Screen 이라 부르며 책갈피는 Stack.Navigator라 부릅니다
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();
적용 순서 2) 기본 틀
//리액트의 모~든 파일은 컴포넌트라 생각하고
//페이지 기능을 해주는 모든 기능이 담겨 있는 컴포넌트를 만든다 생각하세요!
const StackNavigator = () =>{
return (
/// 페이지 기능이 들어갈 곳
)
}
export default StackNavigator;
적용 순서 3) 스크린 옵션
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
//위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
//Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "black",
borderBottomColor: "black",
shadowColor: "black",
height:100
},
headerTintColor: "#FFFFFF",
headerBackTitleVisible: false
}}
>
{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>
</Stack.Navigator>
적용 순서 4) 페이지 연결 컴포넌트를 페이지화 했고, 페이지를 이동할 수 있는 네이게이션도 준비가 됐다면, 우리는 최상단 컴포넌트 즉 App.js에 네비게이션 기능을 달아야 합니다.
즉, 앱 가장 최상위 코드에 네비게이션을 다는겁니다 그래야 앱 어디서든 원하는 페이지 이동이 가능할테니까요!
스택 네비게이터 적용 후 MainPage 모습
[앱 페이지 적용] 페이지 헤더 스타일 수정 - 스택네비게이션 02
페이지 헤더 수정 그런데 현재 MainPage 화면은 다음과 같이 상단의 모습이 약간 이상해 보입니다. 그 이유는 StackNavigator에서 현재 헤더에 대한 스타일과 페이지에 헤더의 제목까지 결정해주고 있기 때문입니다.
✔스택 네비게이터의 헤더 스타일 부분 코드 따라서 헤더 스타일을 적절히 바꾸기 위해 다음과 같이 옵션 부분의 코드를 수정해보도록 하겠습니다.
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 (
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
//위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
//Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "black",
borderBottomColor: "black",
shadowColor: "black",
height:100
},
headerTintColor: "#FFFFFF",
headerBackTitleVisible: false
}}
>
{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>
</Stack.Navigator>
)
}
export default StackNavigator
✔StackNavigator 옵션 코드 수정 후 모습 그래도 위에 페이지 제목으로 MainPage가 되는 모습은 뭔가 또 수정이 필요해보입니다. 이를 위해선 다음 스택 네비게이션 페이지 이동 강의에서 살펴보도록 하겠습니다
[앱 페이지 적용] 페이지 이동하기 - 스택 네비게이션 03
페이지 이동하기 Main 페이지(MainPage.js)에서 카드 버튼을 누르면(Card.js) 꿀팁 상세 페이지(DetailPage.js)로 이동합니다
일단 페이지를 이동시키려면, 책갈피가 페이지들에게 부여해준 페이지 이동 기능을 사용해야 합니다.
Stack.screen에 등록된 모든 페이지 컴포넌트들은 navigation 와 route 라는 딕셔너리(객체)를 속성으로 넘겨받아 사용할 수 있습니다. 이 두 딕셔너리는 다음과 같은 기능을 갖습니다. 일단 먼저 구조를 보여드렸습니다. 물론 사용을 해봐야 감이 오겠죠? 그럼 이제 Card.js에 페이지 이동 기능을 달아보겠습니다. 코드를 실행 한 다음 페이지를 이동해 보면 익숙한 뒤로 가기 버튼도 보일거에요!
👏[실습] 데이터 없이 페이지 이동하기
navigation.navigate("DetailPage")
데이터 연동은 안되어있음 👏[실습] 데이터 가지고 페이지 이동하기 버튼 카드에서 사용한 함수에 아래와 같이 두 번째 인자로 딕셔너리를 넘겨주면, 우리는 이동 한 페이지에서 넘겨준 데이터를 받을 수 있습니다.
navigation.navigate("Detail",{
title: title
})
그럼 Card에서 DetailPage로 이동할 때, MainPage로 부터 넘겨받은 content도 넘겨볼까요? 로딩화면 구현하기 싫으면 기초 아무값이나 넣어두면 됨!! comst [tip(상태변수) : setTip(상태를 바꾸는 함수)]
왜냐하면 지금은 어떠한 카드를 눌러도 상세 페이지에서 동일한 데이터를 보게 되잖아요? tip 데이터를 고정해놨으니까요!✔- 이동한 디테일 페이지 모습 건네 받은 값을 꺼낼 땐, 다음과 같이 책갈피가 navigation과 추가적으로 건네준 route에서 꺼내 확인 할 수 있습니다. route.params 객체에 건네준 딕셔너리가 넘겨 있습니다!
✅route에 담겨져 오는 데이터 콘솔에서 직접 확인
✅DetailPage에서 상태값을 초기에 설정한 이유 DetailPage 초반에 우린 이렇게 상태값을 설정해놨었습니다. 그 이유가 뭘까요? 심지어 이 상태값을 초기에 설정안하면 오류가 발생합니다. tip엔 아무것도 없다며...
//초기 컴포넌트의 상태값을 설정
const [tip, setTip] = useState({
"idx":9,
"category":"재테크",
"title":"렌탈 서비스 금액 비교해보기",
"image": "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Frental.png?alt=media&token=97a55844-f077-4aeb-8402-e0a27221570b",
"desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
"date":"2020.09.09"
})
그 이유는 컴포넌트가 화면에 그려지는 순서에 있습니다. 이건 지금 단계에선 조금 과한감이 있어서 간략히만 설명해보면 다음과 같습니다.
1. DetailPage 컴포넌트가 useState에 들어 있는
데이터 가지고 화면에 그려짐(return 함수실행)
2. 화면에 다 그려진후, useEffect 함수 실행
3. useEffect에서 상태값 변경 이벤트가 실행되면 변경된 데이터 가지고 다시 return 실행
4. 변경된 데이터를 가지고 화면에 DetailPage가 다시 그려짐.
터미널 우측 버튼중에 분할이란 버튼이 있습니다.
