[react-native] Context API

 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해서 지금까지는 Props를 사용하여 직접 해당 컴포넌트에 옵션으로 전달해주었다.

 

이러한 방식은 간단한 구조의 프로젝트에는 쉽게 사용할 수 있는 장점이 있지만, 그 구조가 복잡해질 수록 해당 데이터를 추적하는데 가독성이 떨어지고 코드 분석에 오랜 시간이 걸린다는 단점을 가지고 있다.

 

이럴 때 Context API를 사용하면 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해준다.

 

이는 주로 프로젝트에서 전역 상태를 관리할 때 많이 사용한다.

 

예시를 한번 확인해보자.

---

◎ contexts/LogContext.js

import {createContext} from 'react';

const LogContext = createContext('안녕하세요');

export default LogContext;

 

새로운 Context를 만들 때는 createContext 함수를 사용한다. 이렇게 Context를 만들면, LogContext.Provider라는 컴포넌트와 LogContext.Consumer라는 컴포넌트가 만들어진다.

 

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

 

◎ App.js

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

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

export default App;

 

Provider 에는 value라는 Props를 설정할 수 있는데, 이 값이 바로 Context를 통해 여러 컴포넌트에서 공유할 수 있는 값이다.

 

이렇게 Provider 컴포넌트를 사용하면 이 컴포넌트 내부에 선언된 모든 컴포너트에서 Context 안의 값을 사용할 수 있다. 

 

◎ screens/FeedsScreen.js

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

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

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

export default FeedsScreen;

 

이렇게 하면 Provider에서 설정한 값을 Consumer가 사용할 수 있는 개념이다.

---

요즘은 useContext Hook을 사용하여 이를 훨씬 더 간편하게 사용한다.

 

예시로 children을 사용하여 데이터를 전달하는 아래와 같은 컴포넌트가 있다고 하면,

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
const FeedsScreen = () => {
  return (
    <View style={styles.block}>
      <Box>{value => <Text>{value}</Text>}</Box>
    </View>
  );
};

const Box = ({children}) => {
  return <View style={styles.box}>{children('안녕하세요')}</View>;
};

const styles = StyleSheet.create({
  block: {},
  box: {
    borderWidth: 2,
    padding: 16,
    borderBottomColor: 'black',
    marginBottom: 16,
  },
});

export default FeedsScreen;

 

 

이를 useContext를 사용하여, 쉽게 Context를 사용하도록 변경할 수 있다.

import React, {useContext} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import LogContext from '../contexts/LogContext';
const FeedsScreen = () => {
  const value = useContext(LogContext);
  return (
    <View style={styles.block}>
      <Box>{<Text>{value}</Text>}</Box>
    </View>
  );
};

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

const styles = StyleSheet.create({
  block: {},
  box: {
    borderWidth: 2,
    padding: 16,
    borderBottomColor: 'black',
    marginBottom: 16,
  },
});

export default FeedsScreen;

---

App 컴포넌트에서 useState를 사용해 관리하는 상태를 Provider로 넣어주면 값이 바뀔 때 useContext를 사용하는 컴포넌트 쪽에서도 리렌더링이 잘 발생할 것이다. 

 

Provider를 사용하는 컴포넌트에서 Context의 상태를 관리하는 것보다는 Provider 전용 컴포넌트를 따로 만드는 것이 유지보수성이 더 좋다. 

 

◎ contexts/LogContext.js

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

const LogContext = createContext(undefined);

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

export default LogContext;

 

내부에서는 useState를 사용해 간단한 문자열 상태 값을 관리하고, Provider의 value에는 text와 setText를 넣어준다.

 

◎screens/FeedsScreen.js

import React, {useContext} from 'react';
import {StyleSheet, Text, TextInput, View} from 'react-native';
import LogContext from '../contexts/LogContext';
const 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({
  block: {},
  input: {
    padding: 16,
    backgroundColor: 'white',
  },
});

export default FeedsScreen;

 

이후 FeedsScreen에서 useContext를 사용하여 LogContext에 있는 state들을 사용할 수 있도록 설정할 수 있다.

 

◎App.js

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

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

export default App;