[React Native] 3-3 useContext Hooks 함수

Render Props 는 리액트에 Hooks가 없던 시절 유용했고

 

지금은 그렇게 사용하지 않습니다.  (,,,,,,ㅋ)

 

왜냐하면 리액트에 useContext라는 Hook을 사용하면  Context의 값을 훨씬 간결하게 사용할 수 있습니다.

 

screens/FeedsScreen.js

import React, {useContext} from 'react';
import {View, StyleSheet, Text} from 'react-native';
import LogContext from '../contexts/LogContext';

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

const styles = StyleSheet.create({});

export default FeedsScreen;

 

Consumer 와 Render Props로 Context의 값을 조회하는게 훨씬 깔끔하다.

---

Context에서 유동적인 값 다루기

 

App 컴포넌트에서 useState를 사용 해 관리하는 상태를 Provider로 넣어주면 값이 바뀔 때

 

useContext를 사용하는 컴포넌트 쪽에서도 리렌더링이 발생할 것입니다.

 

Provider를 사용하는 컴포넌트에서 Context의 상태를 관리하는 것보다

 

Provider 전용 컴포넌트를 따로 만드는 것이 유지보수에 더 좋습니다.

 

contexts/LogContext.js

import {createContext, useState} from 'react';
import React 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;

 

이렇게 LogContextProvider라는 컴포넌트를 따로 만들었습니다.

 

내부에서는 useState를 사용하여 문자열의 상태 값을 관리하고

 

Provider 의 value에는 text와 setText를 넣어줬습니다.

 

App.js

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

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

export default App;

다음과 같이 수정하면 FeedsScreen에서 오류가 발생할 것입니다.

 

기존에는 Context에서 문자열 값만 주었는데 이번에는 객체 형태의 값을 받았기 때문입니다

 

screens/FeedsScreen.js

import React, {useContext} from 'react';
import {View, StyleSheet, TextInput} from 'react-native';
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}>
      </TextInput>
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    padding: 16,
    backgroundColor: 'white',
  },
});

export default FeedsScreen;

screens/CalendarScreen

import React, {useContext} from 'react';
import {View, StyleSheet, Text} from 'react-native';
import LogContext from '../contexts/LogContext';

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

const styles = StyleSheet.create({
  block: {},
  text: {
    padding: 16,
    fontSize: 24,
  },
});

export default CalendarScreen;

 

CalendarScreen 컴포넌트까지 수정하고 나서

 

TextInput에 Hello World를 입력한 뒤, 달력 화면을 열어서 문구가 나타나는지 확인하세요.

 

이제 우리는 서로 다른 화면에서 상태를 공유하는 법을 배웠습니다.

 

잘 작동한다면 이번에 작성한 것은 모두 지워주세요

 

(...?)