리액트 네이티브에서 Context를 쓰는 방법

 

1. Context를 생성한다.

React.createContext() 함수를 사용하여 Context를 생성한다. 

이 함수는 defaultValue를 전달할 수 있다. 

import React from 'react';
const MyContext = React.createContext();

 

 

2. Provider를 사용한다.

Provider 컴포넌트를 사용하여 Context의 값을 제공할 수 있다. 

Provider 컴포넌트는 value prop으로 Context 값을 전달할 수 있다.

import React from 'react';
import { View } from 'react-native';
import MyContext from './MyContext';

const Provider = ({ children }) => {
  const [value, setValue] = React.useState('initial value');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

const App = () => (
  <View>
    <Provider>
      {/* 자식 컴포넌트 */}
    </Provider>
  </View>
);

 

 

3. Consumer를 사용한다

Consumer 컴포넌트를 사용하여 Context 값에 접근할 수 있다.

Consumer 컴포넌트는 value를 render prop 함수의 인자로 전달한다.

import React from 'react';
import { Text } from 'react-native';
import MyContext from './MyContext';

const Consumer = () => (
  <MyContext.Consumer>
    {({ value, setValue }) => (
      <Text>
        Current value: {value}
      </Text>
    )}
  </MyContext.Consumer>
);

 

 

---

 

다음은 React Navigation의 RootStack을 사용하여 Context를 전달하는 방법입니다.

 

1. Context를 생성한다.

React.createContext() 사용하여 Context를 생성한다. 

이 함수는 defaultValue를 전달할 수 있다.

import React from 'react';

const MyContext = React.createContext();

2. Provider 사용한다.

Provider 컴포넌트를 사용하여 Context의 값을 제공할 수 있다.

Provider 컴포넌트는 value prop으로 Context 값을 전달할 수 있다. 

import React from 'react';
import MyContext from './MyContext';

const Provider = ({ children }) => {
  const [value, setValue] = React.useState('initial value');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

const App = () => (
  <Provider>
    <RootStack />
  </Provider>
);

3. Consumer를 사용한다

Consumer 컴포넌트를 사용하여 Context 값에 접근할 수 있다. 

Consumer 컴포넌트는 value를 render prop 함수의 인자로 전달한다.

import React from 'react';
import { Text } from 'react-native';
import MyContext from './MyContext';

const Consumer = () => (
  <MyContext.Consumer>
    {({ value, setValue }) => (
      <Text>
        Current value: {value}
      </Text>
    )}
  </MyContext.Consumer>
);

React Navigation의 RootStack을 사용하여 Provider 컴포넌트에서 제공한 Context 값을 Consumer 컴포넌트에서 접근할 수 있다.