screens/FeedsScreen.js

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

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

const styles = StyleSheet.create({
  block: {},
});

export default FeedsScreen;

화면에 “안녕하세요”라는 문구가 나타났나요? Context 안의 값을 사용할 때는 Consumer 컴포넌트를 사용하는데, 아직 이 방식이 익숙하지 않을 것입니다. 컴포넌트 태그 사이에 함수를 넣어줬는데, 이는 Render Props라는 패턴입니다. 이 패턴을 이해하려면 우선 리액트 컴포넌트의 children이라는 Props를 이해해야 합니다.