React Native) Context API 사용하기

Navigation이 서로 다른 컴포넌트 간 데이터 공유를 위해 사용되는 Context API 사용하기

---

 

Context 사용 기본 개념

- createContext : 새로운 Context를 생성하는 함수
- Context.Provider : Context를 사용하기 위해 범위 및 값을 설정
- Context.Consumer : Context를 데이터를 활용하기 위해 값을 불러오는 함수

createContext 예시 - './contexts/LogContext.js 에 작성)

 

import { createContext } from 'react';

const LogContext = createContext();

export default LogContext;

Context.Provider 예시)

import LogContext from './contexts/LogContext';

function App() {
	return (
        <NavigationContainer>
            <LogContext.Provider value="안녕하세요">
              <FeedsScreen />
            </LogContext.Provider>
        </NavigationContainer>
    );
}

* LogContext.Provider 태그로 감싼 컴포넌트(하위 컴포넌트 포함)에서 value 값 공유 가능

Context.Cunsumer 예시)

function FeedsScreen() {
	return {
    	<View>
        	<LogContext.Consumer>
            	{(value) => <Text>{value}</Text>}
            </LogContext.Consumer>
        </View>
    );
}

Render Props 패턴을 활용한 데이터 불러오기 -> 요즘엔 useContext 함수 활용하는 방식으로 바뀜

---

 

children Props

컴포넌트 태그 사이에 넣어준 값 불러오는 Props
예시)

(...)
function FeedsScreen() {
	return (
    	<View style={style.block}>
        	<Box>
            	<Text>1</Text>
            </Box>
            <Box>
            	<Text>2</Text>
            </Box>
            <Box>
            	<Text>3</Text>
            </Box>
        </View>
    );
}

function Box({children}) {
	return <View style={styles.box}>{children}</View>;
}
(...)

위 코드와 같이 children을 사용하면 Box 컴포넌트 태그 사이에 넣은 JSX를 children Props로 받아와서 사용할 수 있음
-> 이와 같은 방식을 Render Props 패턴이라고 함(컴포넌트에서 특정 값을 밖으로 빼와서 사용하는 형태)

Render Props 다른 예시)

(...)
function FeedsScreen() {
	return (
    	<View style={styles.block}>
        	<Box>{(value) => <Text>{value}</Text>}</Box>
        </View>
    );
}

function Box({children}) {
	return <View style={styles.box}>{children('Hello World')}</View>;
}
(...)

위 처럼 해도 화면에 'Hello World'가 나타남

---

 

useContext Hook 함수

Render Props는 Hooks 가 없던 시절 사용하는 방법
useContext Hook은 훨씬 간결하게 사용 가능함

비교 예시 1 - Consumer와 Render Props)

function FeedsScreen() {
	return (
    	<View style={styles.block}>
        	<LogContext.Consumer>
            	{(value) => <Text>{value}</Text>}
            </LogContext.Consumer>
        </View>
    );
}

비교 예시 2 - useContext)

function FeedsScreen() {
	const value = useContext(LogContext);
    return (
    	<View style={styles.block}>
        	<Text>{value}</Text>
        </View>
    );
}

 

useContext Hook은 컴포넌트에서 JSX를 반환하기 전에 값을 조회할 수 있기 때문에 컴포넌트 로직 작성이 더욱 편함

---

 

Context를 활용하여 유동적인 값에 대한 여러 화면 실시간 동기화

useState를 함께 활용하여 useContext가 수정될 때 다른 컴포넌트도 리렌더링 되도록 구현

1. Context 전용 컴포넌트 생성)

import React from 'react';
import {createContext, useState} from 'react';

const LogContext = createContext();

export function LogContextProvider({children}) {
  const [text, setText] = useState('');
  return (
    <LogContext.Provider value={{text, setText}}>
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;

2. Provider에 입력한 text, setText 공유 컴포넌트 범위 감싸기(FeedsScreen, CalendarScreen)

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {LogContextProvider} from './contexts/LogContext';
import FeedsScreen from './screens/FeedsScreen';
import CalendarScreen from './screens/CalendarScreen';

function App() {
  return (
    <NavigationContainer>
      <LogContextProvider>
        <FeedsScreen />
        <CalendarScreen />
      </LogContextProvider>
    </NavigationContainer>
  );
}

export default App;

3. Context로 공유할 text 값 수정하는 부분(FeedsScreen - TextInput 으로 수행)

(...)
import LogContext from '../contexts/LogContext';

function FeedsScreen() {
	const {text, setText} = useContext(LogContext);
    return (
    	<View style={styles.block}>
        	<TextInput
            	value={text}
                onChangeText={setText}
                placeholder="텍스트를 입력하세요."
                style={styles.input}
            />
        </View>
    );
}
(...)

4. Context로 공유된 text 값을 불러오는 부분(CalendarScreen - Text로 출력)

(...)
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
	const {text} = useContext(LogContext);
    return (
    	<View style={styles.block}>
        	<Text style={styles.text}>text: {text}</Text>
        </View>
    );
}
(...)

React Native) Context API 사용하기