Consumer와 Render Props로 Context의 값을 조회할 때보다 훨씬 코드가 깔끔하지요? 한번 두 코드를 함께 비교해봅시다.

useContext

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

Consumer와 Render Props

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

Consumer와 Render Props를 사용할 때는 Context의 값을 읽는 부분이 JSX에 있기 때문에 컴포넌트 로직 작성이 까다로울 수 있습니다. 반면 useContext Hook을 사용하는 경우에는 컴포넌트에서 JSX를 반환하기 전에 값을 조회할 수 있기 때문에 컴포넌트 로직 작성이 더욱 편합니다.