섹션 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
Options for screens | React Navigation
Each screen can configure various aspects about how it gets presented in the navigator that renders it by specifying certain options, for example, the header title in stack navigator, tab bar icon in bottom tab navigator etc. Different navigators support d
reactnavigation.org
<리액트 네비게이션 자주 쓰이는 옵션들>
- 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;
