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)

 

 

ToggleThemeContext 같은 콘텍스트를 구현할 때 항상 작성해야하는 패턴

 

 

 

 

 

콘텍스트 객체가 제공하는 컴포넌트 : 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행처럼 추가적으로 속성 명시를 명확히 해주어야 에러가 나지 않는다.

 

 

 

 

 

 

01

오른쪽 위 스위치/ 왼쪽이 false, 오른쪽이 true