5/31 createContext API, Provider , Consumer, useContext 훅, Switch 컴포넌트
AWS 클라우드환경 네이티브 수업 16일차
리액트 네이티브
314~324
314~324
createContext API
리액트에서 제공, 콘텍스트 기능 구현 시 제일 먼저 해야 함.
타입스크립트에서 createContext API 호출하는 법
type ContextType = { // 공유하려는 데이터 속성 }
const defaultContextValue : ContestType = { // 공유하려는 데이터 속성 초깃값 }
const SomeContext = createContext<ContextType>()defaultContextValue)
콘텍스트 객체가 제공하는 컴포넌트 : Provider , Consumer
Provider 컴포넌트는 다음처럼 value와 children 속성이 있는 providerProps 속성을 제공.
타입변수는 createContext<T>와 같아야 함.
ProviderProps 속성
interface ProviderProps<T> {
value T;
children?: reactNode ;
}
useContext 훅
리액트에서 제공
콘텍스트 객체가 제공하는 Provider 컴포넌트의 value 속성값을 얻을 목적으로 사용하는 훅
ToggleThemeProvider에 toggleTheme 속성 추가
Switch 컴포넌트
리액트 네이티브에서 제공.
value 속성과 onValueChange 이벤트 속성을 제공.
value 속성은 false와 true 중 하나 지정 가능.
false => 스위치는 왼쪽, 흐릿한 색상 / true => 오른쪽, 짙은 색상
onValueChange 는 (boolean) => void 타입 이벤트 처리기를 설정 가능, value 값이 달라지면 이벤트 처리기를 호출.
2번째 캡쳐처럼 이제는 FC에 children 속성을 포함하지 않기 때문에
16행처럼 추가적으로 속성 명시를 명확히 해주어야 에러가 나지 않는다.
