[React] context API를 이용한 state 전송

특정 함수를 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 리액트에서 자주 쓰이는 작업이지만, 만약 3~4개 이상의 컴포넌트를 거쳐서 전달을 해야 하는 일이 발생하게 된다면 매우 번거로운 작업이 됩니다.

리액트의 Context API 를 사용하면, 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리 할 수 있습니다. 이 값은 꼭 상태를 가르키지 않아도 됩니다. 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있습니다.

Context 문법으로 props 없이 state 공유하기

리액트 기본 문법 Context API를 사용하면 props 전송 없이도 하위 컴포넌트들 끼리 state 값들을 똑같이 공유할 수 있습니다.

(App.js)

let 재고context = React.createContext();

function App(){
  let [invertory, inventorySet] = useState([10,11,12]);

  return (
    <Components />
  )
}
 

우선, createContext()라는 함수를 이용해 변수를 만들어 줍니다. 이제 이 변수는 바로 특별한 <컴포넌트>가 됩니다.

(App.js)

let inventoryContext = React.createContext();

function App(){
  let [inventory, inventorySet] = useState([10,11,12]);

  return (
    <Components />
    <inventoryContext.Provider value={재고}>
      <Cards />
    </inventoryContext.Provider>
    
  )
}

만들어둔 특별한 컴포넌트로 state 값 공유를 원하는 컴포넌트들을 <범위></범위>로 전부 감싸 줍니다.
그리고 value={state이름} 이렇게 공유할 state를 집어넣으면 됩니다.

그럼 이제 <범위></범위> 안에 있는 모든 HTML & 컴포넌트는 복잡한 props 전송 없이도 재고 state를 이용할 수 있게 되었습니다.

(App.js)

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

function Card(){
  let inventory = useContext(inventoryContext);

  return (
    <Components />
    <div>{inventory[0]}</div>
  )
}

state를 사용하고 싶으면 useContext() 라는 Hook을 이용해서 사용을 원하는 context를 불러오면 됩니다. (useContext 훅을 쓰려면 상단에 'react' 로부터 import 해오시면 됩니다.)

inventoryContext에 들어있는 state를 변수로 저장해 쓰겠습니다라고 선언해주는 문법으로, 이제 inventory라는 변수에 아까 지정해 놓은 inventory라는 state 데이터가 그대로 들어있습니다.

컴포넌트가 다른파일에 있다면?

다른 컴포넌트에서 inventory state를 쓰고자 하는 경우에도 같은 방식으로 사용하면 됩니다.
이 경우에는 변수를 App.js에서 export하고 Detail.js에서 import해오면 됩니다.

(App.js)

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

export let inventoryContext = React.createContext(); //변수를 export 해줍니다.

function Card(){
  let inventory = useContext(inventoryContext);

  return (
    <Components />
    <div>{inventory[0]}</div>
  )
}

(Detail.js)

import {inventoryContext} from './App.js'; //App.js에서 변수를 import해옵니다.

function Detail(){
  let inventory = useContext(inventoryContext);  
  return (
    <Components />
  )
}