AWS 클라우드환경 네이티브 수업 15일차
리액트 네이티브
278~314
278~283
Bottomnavigation 컴포넌트
화면 아래 쪽에 화면을 전환할 수 있는 아이콘 버튼을 표시함.
react-native-paper 패키지가 제공함.
284~289
커스텀 훅
사용자가 편의를 위해 공통으로 사용하는 코드를 추려내어 만든 훅 함수.함수 이름은 'use~'로 시작해야한다.
useToggle 커스텀 훅 제작
useTimeout 커스텀 훅 제작
useInterval과 useLayout 커스텀 훅 제작
290~295
lifeCycle / Timer / Interval 컴포넌트를 커스텀 훅 버전으로 다시 구현.
295~299
Promise 객체
ES5 자바 스크립트가 기본으로 제공하는 타입.resolve 된 값이거나, reject 된 오류 둘 중 하나를 반드시 발생시킨다고 '약속' 함.타입 스크립트에서 Promise 타입은 resolve 된 값의 타입을 타입 변수 T로 하는 제네릭 타입.오류는 타입이 error 이므로 특별히 명시 x
async/await 구문의 이해
await 연산자를 사용하려면 async 함수 수정자가 반드시 필요하다.
async 함수는 다음 과 같다.
const astncFn = async () => {
const value1 = await Promise.resolve(1) // 값은 1
}
useAsync 커스텀 훅 제작
300~301
fetch 컴포넌트를 커스텀 훅 버전으로 구현.
5장
302~309
콘텍스트
react 패키지는 createContext 라는 API를 제공.
createContext 함수 호출로 얻은 값을 콘텍스트라고 한다.
콘테스트는 createContext와 useContext 훅을 통해 이루어 진다.
쉽게 말해 콘텍스트는 부모에서 자식, 손자, 증손자 컴포넌트로 일일히 속성 전달을 할 필요 없이
편하게 같은 커스텀 훅을 사용함으로써 속성을 공유할 수 있게 해주는 것이다.
AppearanceProvider 컴포넌트와 useColorScheme 커스텀 훅
react-native-appearance 패키지에서 제공.
'Provider'자가 들어가는 컴포넌트는 항상 최상위 컴포넌트로 동작해야 함.
310~314
Provider 컴포넌트
react-native-paper 에서 컴포넌트 제공.
PaperProvider의 theme 속성
theme 속성에 설정할 수 있는 값으로 다음 두 가지를 제공합니다.
import {DefaultTheme, DarkTheme} from 'react-native-paper'
useTheme 커스텀 훅
react-native-paper 에서 제공
theme 객체 반환 : 이 theme 객체는 PaperProvider의 theme 속성에 설정한 값이 콘텍스트를 통해 전달 된 것.
const theme = useTheme()
const { fonts, colors } = theme // theme 의 폰트와 칼라의 속성을 얻는다.
위의 훅과 함수들을 이용해서 구현을 해보면
댓글