React - Context API

React Context API

Context API 란 props를 일일히 자식 태그마다 넘겨보내지 않고

컴포넌트 트리 전체에 데이터를 쉽게 공유할 수 있도록 해주는 React 내장함수이다.

 

Contex API를 사용하기위에 createContext함수를 import 해야한다.

import { createContext } from "react";

 

createContext 함수란 context를 생성하여 공용하기위한 데이터(state)를 저장한다.

export let Context1 = createContext();

 

데이터를 공유하기위해 context를 생성하여 state 공유를 원하는 태그를 감싸준다.

// 공용으로 사용할 데이터
let [product] = useState(['hat', 'shirt', 'glove']);

...


// 보내고 싶은 컴포넌트 태그에 Context태그로 감싸주고 
// .Provide를 붙인후에 value속에 공용데이터를 선언한다.
<Context1.Provider value={{ product }}>
  <Detail shoes={shoes} />
</Context1.Provider>

Context1 태그에 .provider를 사용하여 value에 있는 값을 하위 태그에 제공한다.

 

 

 

반응형

 

 

 

Detail 컴포넌트에서 product를 받아서 사용할 수 있다.

제공받은 데이터를 Detail 컴포넌트에서 useContext함수를 써 사용할수있다.

import { useContext } from 'react';
import { Context1 } from './../App.js'

 

import 로 useContext를 사용할 수 있도록 선언하고 Context1을 사용하도록 받아온다.

Context1을 사용하기위해 useContext를 사용하여 Context를 불러온다.

let { product } = useContext(Context1);

 

 

받아온 product를 화면에 표출하면 props를 사용하지 않고도 전달받을 수 있다.