섹션 0. 리액트 네이티브 시작!
13강. 라우트 params와 헤더 옵션들
타입스크립트 : 자바스크립트의 변수, 매개변수, 리턴값에 타입이 붙어있는 것
파라미터 : 페이지가 있으면 그 페이지에 변수를 추가해 주는 개념
https://github.com/Edison-im/FoodDeliveryApp
여기에서 Edison-im, FoodDeliveryApp이 모두 파라미터다.
유저에 따라서 휙휙 변할 수 있는 것
type RootStackParamList = {
Home: undefined;
Details: {itemId: number; otherParam?: string};
};
현재 App.tsx에서 파라미터는 따로 없어서 비워둔 상태이다.
네비게이터 : 스크린들의 그룹
Stack.Navigator :위로 겹겹이 쌓이는 네비게이터
Stack : 위로 겹겹이 쌓이는 것. 하나씩 쌓이고, 하나씩 빠진다.
계속 쌓아놓기 때문에 뒤로 돌아갈 수 있다. (goBack)
이런 옵션들이 많기 때문에 따로 공부를 해야 한다.
<리액트 네비게이션 공식 문서 가이드>
https://reactnavigation.org/docs/screen-options
<리액트 네비게이션 자주 쓰이는 옵션들>
- safe-area가 적용되어 있음(설명)
- NavigationContainer: 내비게이션 상태 저장
- Navigator 안에 Screen들 배치
- Screen name 대소문자 상관 없음, component는 보통 두 가지 방식 사용(컴포넌트 그 자체 vs Render Callback)
- props로 navigation과 route가 전달됨
- Pressable, Button, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback
- navigation.navigate로 이동 가능
- navigation.push로 쌓기 가능
- navigation.goBack으로 이전으로 이동
- params 추가 가능(params에 user같은 객체를 통째로 넣지 말기, id를 넣고 user는 글로벌 스토어에 넣기)
- Screen options.title: 제목
- Screen options에 함수를 넣어 route.params로 params 접근 가능
- navigation.setOptions로 옵션 변경 가능
- Navigator screenOptions로 공통 옵션 설정
- Screen options.headerShown로 헤더표시여부
- Screen options.headerTitle로 커스텀 컴포넌트
- Screen options.headerRight로 우측 버튼(useLayoutEffect)
공식문서, 구글링, 스택오버플로우 등을 계속 찾아봐야 한다.
놀랍게도 여기까지가 기본 설명이었다고 한다.
이제부터가 진짜 시작이다.
[14강. 보너스 : relative, absolute로 모달 그리기]는 일단 패스
섹션 1 - 리액트 네비게이션
1강. 앱 라우터 구성하기
npm install @react-navigation/bottom-tabs
리액트 네비게이션 bottom-tabs 설치한다.
앱에서 흔히 보는 밑에 부분 탭 관련 패키지이다.
하지만 이렇게 오류가 난다.
필자가 현재 강의를 듣는 React 버전과 여기서 요구하는 버전이 달라서 그렇다고 한다.
역시 이럴 때는 어쩔 수 없이 강제설치를 해야 한다.
npm install @react-navigation/bottom-tabs --legacy-peer-deps
--legacy-peer-deps를 붙여서 설치해 준다.
이렇게 되면 보안 취약점이 생긴다고 하는데, 지금은 뭐 보안 신경 쓸 때가 아니니까 어쩔 수 없다.
설치완료
앱을 만들기 전에 충분히 설계를 하고 들어가야 한다.
예를 들어서, 기본적으로 탭이 먼저 있고, 탭 안에서 스택이 들어있는 구조로 갈 것이다. 페이지는 어떻게 구성할 것이다. 정도의 생각은 하고 시작해야 한다.
타입스크립트의 타입도 import, export가 가능하다.
2강. 스크린과 중첩 라우팅
ESLint와 Prettier 설치
JavaScript Format에서 Enable 해제
Format on Save : 체크
1) ESLint airbnb 설치
npx install-peerdeps --dev eslint-config-airbnb
이렇게 설치하려고 했는데 자꾸 충돌 문제가 나서 결국 강제로 설치했다.
npm install --save-dev eslint-config-airbnb eslint@^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react@^7.28.0 eslint-plugin-react-hooks@^4.3.0 --legacy-peer-deps
옛 버전 때문에 몇 개를 강제설치하는지.. 나중에 문제가 어디서 터져도 할 말이 없을 것 같다.
2) Pretter 설치
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
이것도 이렇게 간단히 설치하려고 했는데 이놈의 버전 충돌 문제 때문에 역시 강제할 수밖에 없었다.
npm install --save-dev eslint-config-prettier eslint-plugin-prettier --legacy-peer-deps
결국 설치가 되긴 됐다.
3) 규칙 설정
(1) ESLint
package.json에 넣는다.
"eslintConfig": {
"extends": [
"airbnb",
"plugin:prettier/recommended"
],
"rules": {
"object-curly-newline": 0,
},
"env": {
"browser": true
},
},
(2) Prettier
.prettierrc.js 파일에 넣는다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
그런데 벌써 ESLint가 적용됐는지 위의 코드를 쓰고 저장하면 아래처럼 바뀐다.
{
('singleQuote');
true;
('semi');
true, 'useTabs';
false, 'tabWidth';
2, 'trailingComma';
'all', 'printWidth';
80;
}
4) Page 설정
각 페이지별로 세팅을 완료한다.
useState를 false에서 true로 바꾸면 네비게이션 탭이 나타나게 된다.
현재 이렇게 나오는 화면을 수정
코드수정해서 Stack.Screen을 중첩해서 사용할 수도 있다.
headerShown을 이용해서 헤더 안 보이게 하기
지도를 보면서 완료된 건에 대해서는 완료처리를 한다.
이러면 지도를 가만히 놔두고 그 위에 완료를 스택처럼 쌓는 것이다.
이렇게 하는 이유가 지도는 로딩할 때 오래 걸리기 때문이다.
그래서 여러 번 로딩하게 만드는 것이 아니라 한번 로딩하고 그 위에 스택을 쌓는 게 속도가 더 빠르다.
중첩 라우팅
네비게이터 안에 또 다른 네비게이터가 들어갈 수 있다.
그렇기 때문에 초반에 잘 설계하는 게 중요하다.
Setting에서 내 정보를 클릭할 때마다 숫자 하나씩 높여가기
import React, { useState } from "react";
import { Pressable, Text, View } from "react-native";
function Setting() {
const [count, setCount] = useState(1);
return (
<View>
<Pressable onPress={() => setCount( p => p + 1)}>
<Text>{count}</Text>
</Pressable>
</View>
);
}
export default Setting;