[React Native/RN] Hooks - useContext 사용법, 전역변수 사용

이전글

👉🏻 [React Native/RN] Hooks이란? (useState, useEffect 사용법)

👉🏻 [React Native/RN] Hooks - useRef 사용법, TextInput onSubmitEditing 사용 예제

[React Native/RN] Hooks - useRef 사용법, TextInput onSubmitEditing 사용 예제

 

 

 

useContext

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

 

일반적인 React 애플리케이션에서 데이터는 부모로부터 자식에게 props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우에는 이 과정이 번거로울 수 있다.

context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

 

결국, React Native에서 props 값을 전역변수처럼 전체적으로 사용할 수 있게 한다.

 

 

 

 

사용법

• AppContext.js

import React from "react";

const AppContext = React.createContext();

export default AppContext;

먼저 Context 객체를 생성해야 한다.

Context 객체를 구독하고 있는 컴포넌트를 렌더링 할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽는다.

 

 

• App.js

<AppContext.Provider value={/* 어떤 값 */}>

Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달하는 역할을 한다. 값을 전달받을 수 있는 컴포넌트의 수에 제한은 없다.

 

RN 앱의 최상위인 App.js에 추가를 해주었다.

import AppContext from './src/components/AppContext';

const App = () => {

  return (
    <AppContext.Provider value={values}>
      /* 컴포넌트 */
    </AppContext.Provider>
  )
}

export default App;

 

 

 

 

 

 

value={values}의 values 값을 설정을 해주어야 한다.

전역변수로 사용할 state값, 그 값을 업데이트해줄 함수, useContext에서 사용할 object인 values를 생성해 주었다.

import React, {useState} from 'react';
import AppContext from './src/components/AppContext';

const App = () => {

  const [stringValue, setStringValue] = useState('');

  const setValue = (string) => {
    setStringValue(string)
  }
  
  
  const values = {
    stringValue: stringValue,
    setValue
  }


  return (
    <AppContext.Provider value={values}>
      /* 컴포넌트 */
    </AppContext.Provider>
  )
}

export default App;

 

 

 

• 사용할 컴포넌트

import React, {useEffect, useContext} from 'react';
import { Text } from 'react-native';

import AppContext from '../AppContext'


function Screen({ navigation }) {

  const myContext = useContext(AppContext);
  
  // 함수 사용
  myContext.setValue('value입니다.')
  
  
  return(
  	<Text>stringValue: {myContext.stringValue}</Text>
  )

}

 

const myContext = useContext(AppContext); 를 통해 context를 불러와 그 안에 있는 값과 함수를 호출하여 사용할 수 있다.

 

해당 방식 이외에도 createContext() 사용 시, 괄호 안에 기본 값을 생성해 사용할 수 있다.

const Context = createContext(defaultVaule);