๐ React Native ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ - Context
๐ซ Context
@ U ๊ธฐ๋ง๊ณ ์ฌ ์ถ์ : Context, 306p, useToggleTheme, useContext
์ปดํฌ๋ํธ์ ์์ฑ์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์ ์ปดํฌ๋ํธ๋ก ์ด๋ค ์ ๋ณด๋ฅผ ์ ๋ฌํ๋ ค๊ณ ํ ๋ ์ฌ์ฉํ๋ ๋ฉ์ปค๋์ฆ์ด๋ค.
๊ทธ๋ฐ๋ฐ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์ง๊ณ ์์์ด ์๋ ์์๋ ์ค์์ ์ปดํฌ๋ํธ์ ์์ฑ์ ์ ๋ฌํ๋ ค๊ณ ํ๋ฉด โ์ง์์ ์ธ ์์ฑ ์ ๋ฌโ์ ํด์ผ ํ๋ค. (๋นํจ์จ์ )
1
2
3
4
5
<์์์ปดํฌ๋ํธ shared_props={shared_props} />
({shared_props}) => <์์์ปดํฌ๋ํธ shared_props={shared_props} />
({shared_props}) => <์ฆ์์์ปดํฌ๋ํธ shared_props={shared_props} />
// shared_props๋ฅผ ๋จ์ง ์ฆ์์ ์ปดํฌ๋ํธ์์๋ง ์ฐ๋๋ผ๋ ์์ ์ปดํฌ๋ํธ์ ์์ ์ปดํฌ๋ํธ ๋ชจ๋์๊ฒ ์์ฑ์ ์ ๋ฌํด์ผ๋ง ํจ
์ด๋ฐ ์์ฑ ์ ๋ฌ์ ๋์ ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๊ฒ์ด ์ปจํ ์คํธ์ด๋ค.
์ปจํ ์คํธ๋, react ํจํค์ง์์ ์ ๊ณตํ๋ createContext์ useContext ํ ์ ํตํด ์ด๋ฃจ์ด์ง๋ค.
createContext ํจ์ ํธ์ถ๋ก ์ป์ ๊ฐ์ด ์ปจํ ์คํธ๋ค.
1
2
3
4
<Provider value={} /> // ๋ถ๋ชจ, by createContext
useContext ~ // ์์
useContext ~ // ์์
useContext ~ // ์ฆ์์
์ปจํ ์คํธ๋ฅผ ์ฐ๋ ์ปดํฌ๋ํธ๋ ์ด๋ฆ์ โProviderโ๋ฅผ, ์ปค์คํ ํ ์๋ ์ด๋ฆ์ โuse~โ๋ฅผ ์ด๋ค.
์ปจํ ์คํธ ๊ธฐ๋ฅ์ ๊ตฌํํ react-native-paper์ ๊ฐ์ ํจํค์ง ๋ํ โProviderโ ๊ฐ ๋ค์ด๊ฐ ์ปดํฌ๋ํธ์ Provider๊ฐ ์ ๊ณตํ๋ ์ ๋ณด๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํ๋ useTheme์ ๊ฐ์ ์ปค์คํ ํ ์ ์ ๊ณตํ๋ค.
๐ซ Theme
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์ฑ์์ ํ ๋ง ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ค๋ฉด ๋ฐ๋์ ์ปจํ ์คํธ๋ฅผ ์ด์ฉํด์ผ ํ๋ค.
react-native-paper ํจํค์ง๋ Provider, AppearanceProvider ์ปดํฌ๋ํธ์ useColorScheme ์ปค์คํ ํ ์ ์ ๊ณตํ๋ค.
๋ฆฌ์กํธ / ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ์ ๊ณต์๋ฅผ ๋ปํ๋ โProviderโ๊ฐ ๋ค์ด๊ฐ ์ปดํฌ๋ํธ๋ ํญ์ ์ต์์ ์ปดํฌ๋ํธ (Root Component)๋ก ๋์ํด์ผ ํ๋ค.
์ด๋ฐ ์ปดํฌ๋ํธ๋ ์ฝํ ์คํธ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ๋ง๋ ๋ค.
โProviderโ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ๋ ํจํค์ง๋ ํญ์ ์ด ์ปดํฌ๋ํธ๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋๋ก โuse~โ ํํ์ ์ปค์คํ ํ ์ ์ ๊ณตํ๋ค.
(AppearanceProvider๋ useColorScheme ์ปค์คํ ํ ์ ์ ๊ณตํ๋ค.)
1
const scheme = useColorScheme() // 'dark' or 'light'
useColorScheme๋ ํ์ฌ ํฐ์ด ๋คํฌ๋ชจ๋๋ก ๋์ํ๊ณ ์๋์ง๋ฅผ ํ์ธํ๋ค.
useColorScheme๋ ๋จ์ํ ๋ชจ๋๋ง ํ์ธํ๋ ๊ฒ์ด๊ณ , ์ค์ ๋ก ๋ชจ๋์ ๋ฐ๋ผ ๋ฐํ์๊ณผ ๊ธ์ ์์ ๋ฐ๊พธ๋ ค๋ฉด ๋ ๋ค๋ฅธ โProviderโ ์ปดํฌ๋ํธ๊ฐ ํ์ํ๋ค.
1
import {Provider as ํน์ ์ด๋ฆ} from 'react-native-paper'
Provider๋ ๋๋ฌด ์ผ๋ฐ์ ์ธ ์ด๋ฆ์ด๋ผ, ํน์ ์ด๋ฆ์ผ๋ก ๋ฐ๊ฟ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
Provider๋ ๋ฐ๋์ ์์ ์ปดํฌ๋ํธ๋ก ๋์ํด์ผ ํ๋ฉฐ, ์ด๋ ์๋ก ๋ค๋ฅธ Provider๋ฅผ ์ค์ฒฉ์์ผ์ผ ํ ๋ ์์๋ ์์ ๋กญ๊ฒ ์ค์ ํ ์ ์๋ค.
์ปจํ ์คํธ ๊ธฐ๋ฅ์ ์์ ํ ๋ ๋ฆฝ์ ์ผ๋ก ๋์ํ๊ธฐ์, ๋ค๋ฅธ ์ปจํ ์คํธ ๊ธฐ๋ฅ์ ์ ํ ์ํฅ์ ์ฃผ์ง ์๊ธฐ ๋๋ฌธ์ด๋ค.
Provider๋ theme ๋ผ๋ ์ ํ ์์ฑ์ ์ ๊ณตํ๋๋ฐ, ์ด๋ react-native-paper ํจํค์ง์์ ์ ๊ณตํ๋ DefaultTheme, DarkTheme ์์ฑ์ผ๋ก ์ค์ ํ ์ ์๋ค.
1
2
const theme = useTheme()
const {fonts, colors} = theme
useTheme ์ปค์คํ ํ ์ Provider์ theme ์์ฑ์ ์ค์ ๋ ๊ฐ์ ์ปจํ ์คํธ๋ก ๋ถ๋ฌ์จ๋ค.
theme ๊ฐ์ฒด์ ๋น๊ตฌ์กฐํ ํ ๋น ๊ตฌ๋ฌธ์ ์ ์ฉํ์ฌ fonts์ colors ์์ฑ์ ์ป์ ์ ์๋ค.
1
2
3
4
5
6
type SomeProps =
{
theme: any
}
const Some: FC<SomeProps> = ({theme}) => {}
์๋ ๊ฐ์ผ๋ฉด ์ ๊ฐ์ ์ฝ๋๋ฅผ ์ง์ ๊ตฌํํ๊ณ , ์์ฑ์ ๋๊ฒจ ๋ฐ์ ์ฌ์ฉํด์ผ ํ๋ค.
1
2
3
export type ContextType = { /*๊ณต์ ์์ฑ*/ }
const defaultContextType: ContextType = { /* ๊ณต์ ์์ฑ ์ด๊น๊ฐ */ }
const SomeContext = createContext<ContextType>(defaultContextType)
์ปจํ ์คํธ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๊ฐ์ฅ ๋จผ์ ์ปจํ ์คํธ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ผ ํ๊ณ , ์ปจํ ์คํธ ๊ฐ์ฒด๋ createContext๋ฅผ ํตํด ๋ง๋ค ์ ์๋ค.
createContext๋ฅผ ํตํด ๋ง๋ ์ปจํ ์คํธ ๊ฐ์ฒด๋ Provider์ Consumer ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ๋ค.
Provider๋ ์์ ์ธ๊ธํ Provider๋ค๊ณผ ๊ฐ์ ์ญํ ์ ํ๋ ์ปดํฌ๋ํธ๊ณ , Consumer๋ Provider๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ์ํ ์ปดํฌ๋ํธ์ด๋ค.
์ฐธ๊ณ : ํด๋์ค ์ปดํฌ๋ํธ
Provider ์ปดํฌ๋ํธ๋ value์ children ์์ฑ์ด ์๋ ProviderProps ์์ฑ์ ์ ๊ณตํ๋ค.
1
2
3
4
5
6
7
8
/* ํ์
๋ณ์ T == createContext<T> */
interface ProviderProps<T>
{
/* ์ปจํ
์คํธ Provider๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ */
value: T;
/* ์ปดํฌ๋ํธ์ children๊ณผ ๊ฐ์ ์๋ฏธ */
children?: ReactNode;
}
react ํจํค์ง๊ฐ ์ ๊ณตํ๋ useContext ํ ์, ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ฐ์ ์ปจํ ์คํธ ๊ฐ์ฒด๊ฐ ์ ๊ณตํ๋ Provider ์ปดํฌ๋ํธ์ value ์์ฑ๊ฐ์ ๋ฐํํ๋ ํ ์ด๋ค.
useContext ํ ์ ์ฌ์ฉํ๋ ์ฝ๋ ํจํด์ ์๋์ ๊ฐ์ผ๋ฉฐ, useColorScheme, useTheme ์ปค์คํ ํ ๋ ์ด๋ฐ ์ฝ๋ ํจํด์ผ๋ก ๋ง๋ค์ด์ง ์ปค์คํ ํ ์ด๋ค.
1
2
3
4
5
export const useSome = () =>
{
const value = uesContext(SomeContext)
return value;
}
@ TODO : 322p Switch
๐ซ useRef, useImperativeHandle
@ U ๊ธฐ๋ง๊ณ ์ฌ ์ถ์ : useRef, 306p
useRef์ useImperativeHandle ํ ์ ref ์์ฑ์ ์ ์ฉํ๋ ๊ฐ์ ๋ง๋๋ ํ ์ด๋ค.
๋ฆฌ์กํธ์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๊ฐ ์ ๊ณตํ๋ ์ปดํฌ๋ํธ, App ๊ฐ์ ์ฌ์ฉ์ ์ปดํฌ๋ํธ์๋ ๋ชจ๋ ref ์์ฑ์ด ์๋ค.
์ฝ์ด ์ปดํฌ๋ํธ์์๋ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์๋๋ฐ, ref์์ฑ์ด ์๋ ์ฌ์ฉ์ ์ปดํฌ๋ํธ๋ forwardRef ํจ์๋ก ์์ฑํด์ผ ํ๋ค๋ ์กฐ๊ฑด์ด ์๋ค.
1
2
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;
๐ซง ref ์์ฑ
๋ฆฌ์กํธ/๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ์ ๊ณตํ๋ ์ฝ์ด ์ปดํฌ๋ํธ ์ค์๋ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ์๋ค.
- TextInput ์ปดํฌ๋ํธ : focus(), blur()
- ScrollView ์ปดํฌ๋ํธ & FlatList ์ปดํฌ๋ํธ : scrollToTop(), scrollToEnd()
์ปดํฌ๋ํธ์ ๋ฉ์๋๋ฅผ ํธ์ถํ๋ ค๋ฉด ์ปดํฌ๋ํธ์ ๋ฆฌ์กํธ ์์ (React Element, ๊ฐ์ฒด ์งํฅ ์ธ์ด์์ ํด๋์ค์ ์ธ์คํด์ค์ ๊ฐ์ ๊ฐ๋ ) ์ ์ป์ ์ ์์ด์ผ, ๊ฐ์ฒด.๋ฉ์๋() ํํ๋ก ํธ์ถํ ์ ์๋ค.
๋ฆฌ์กํธ์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ์ปดํฌ๋ํธ๊ฐ ์ ๊ณตํ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ ์ ์๋๋ก ref ์์ฑ์ ์ ๊ณตํ๋ค. ์ปดํฌ๋ํธ์ ์ธ์คํด์ค๋ฅผ ์ป์ ์ ์์ผ๋ฉฐ ์ด๋ฅผ ์ด์ฉํ์ฌ ref.๋ฉ์๋() ํํ๋ก ํธ์ถํ ์ ์๋ค.
๐ซง ๊ตฌํ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// T๋ FlatList, ScrollView, TextInput ๊ฐ์ ์ปดํฌ๋ํธ
interface RefAttributes<T> extends Attributes
{ ref? : Ref<T> }
interface RefObject<T>
{ readonly current: T | null; }
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;
// i.e.
const someRef = useRef<Some | null>(null)
<Some ref={someRef} />
someRef.current?.someMethod()