CreateContext

리액트네이티브에서는 부모에서 자식으로 데이터 전달할때 props를 이용한다.
글로벌이나 전체 공유할수 있는 방법이 없을까?

이때 사용하는 컴포넌트가 CreateContext이다.

🧩 CreateContext란?
리액트네이티브에서 CreateContext는 "공유 상자"를 만드는 도구이다.
Context 객체를 반환한다.

🧩 Provider란?
데이터 공급자(Data Provider)로 Context에 값을 넣는다.
value라는 prop을 통해 공유할 데이터를 지정하고 하위 컴포넌트 어디서든 접근 가능하다..

🧩 useContext와 Consumer란?
useContext와 Consumer를 통해 Context 데이터에 접근하여 가져 올수 있다.

간단한 예제1)

User.js

import { createContext } from 'react';

const UserContext = createContext({ name: 'gildong Hong' })

export default UserContext;

userContext 사용 : App.js 파일

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import UserContext from './User';

export default function App() {
const user = useContext(UserContext);
return (<Text>마이 이름: {user.name}</Text>);
}

Consumer 사용 App.js 파일

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import UserContext from './User';

export default function App() {
return (
    <UserContext.Consumer>
      { value => <Text>마이 이름: {value.name}</Text> }
    </UserContext.Consumer>
);
}

User.js 파일을 다음과 같이 여러군데서 호출 하더라도 createContext 컴포넌트는 한번만 생성이 되고 UserContext를 반환한다.

const user = useContext(UserContext);

간단한 예제2)

Provider 래퍼 컴포넌트는 진짜 자주 쓰이니까 이 패턴 잘 기억해 두면 나중에 Context 쓸 때 완전 편해질것 같다.
Cafeteria.js에서 children으로 넘겨서 Provider로 감싸는 패턴은 기억하자.

FoodContext.js 파일

import React from 'react';

const FoodContext = React.createContext();
export default FoodContext;

Cafeteria.js 파일

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

function Cafeteria({ children }) {
return (
    <FoodContext.Provider value="김치볶음밥">
      {children}
    </FoodContext.Provider>
);
}

export default Cafeteria;

Student.js 파일

import React, { useContext } from 'react';
import { Text } from 'react-native';
import FoodContext from './FoodContext';

function Student() {
const food = useContext(FoodContext);
return <Text>오늘 급식은 {food}!</Text>;
}

export default Student;

App.js 파일

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

export default function App() {
return (
    <Cafeteria>
      <View>
        <Student />
      </View>
    </Cafeteria>
);
}

Cafeteria 컴포넌트의 children이름은 아무거나 사용해도 엘리먼트 자식들로 넘어온다.
children이름은 관습이다. 다른 이름 사용해도 됨.
옛날 리액트네이티브에서는 props.children로 이름이 고정되어 있었다.

function Wrapper(props) {
return <div style={{border: '10px solid tomato'}}>{props.children}</div>;
}