study: 리네다기 | 6장 - ContextAPI

ContextAPI 는 리액트 내장 기능으로 Props 를 사용하지 않아도
특정 값이 필요한 컴포넌트끼리 값을 공유할 수 있게 해준다
주로 전역 상태를 관리할 때 사용한다

Context 만들기

import { createContext } from 'react'

const LogContext = createContext('hi')

export default LogContext

createContext 를 사용하여 Context 를 생성하면
LogContext.Provider 컴포넌트와 LogContext.Consumer 컴포넌트가 생성된다

Provider 로 Context 안에 있는 값을 사용할 컴포넌트들을 감싸준다

 <LogContext.Provider value="안녕하세요">
        <RootStack />
      </LogContext.Provider>

Provider 에서 value Props를 설정하면 Context를 통해 여러 컴포넌트에서 공유할 수 있는 값이 된다
Provider 컴포넌트 내부에 선언된 모든 컴포넌트에서 사용할 수 있다

Context 안의 값을 사용할 때는 Consumer 컴포넌트를 사용한다

 <LogContext.Consumer>
        {(value) => <Text>{value}</Text>}
      </LogContext.Consumer>

컴포넌트 태그 사이에 함수를 넣어줬는데 이는 Render Props라는 패턴이다
이 패턴을 이해하려면 리액트 컴포넌트의 children이라는 Props를 이해해야 한다

리액트에 useContext라는 Hook 을 사용하면 Context의 값을 훨씬 간결하게 사용할 수 있다
Context의 Consumer 를 꼭 사용할 필요가 없음

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

Hook 을 사용하는 편이 코드가 훨씬 간결해지니 사용하는 편이 좋다

Context에서 유동적인 값 다루기

App 컴포넌트에서 useState 를 사용해 관리하는 상태를 Provider 로 넣어주면
값이 바뀔 때 useContext 를 사용하는 컴포넌트 쪽에서도 리렌더링이 발생한다
Provider 를 사용하는 컴포넌트에서 Context 를 관리하는 것 보다는
Provider 전용 컴포넌트를 만드는 것이 유지보수에 좋다

특히 로직이 복잡할수록 그렇다

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

const LogContext = createContext();

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

export default LogContext;

LogContextProvider라는 컴포넌트를 따로 만들어 내부에서는 useState를 사용해 문자열 상태 값을 관리,
Provider의 value에는 text와 setText를 넣어준다

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;

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

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

export default FeedsScreen;

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