Context

일반적인 React 애플리케이션에서 데이터는 위에서 아래로, props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

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

세팅 및 사용법

//App.js

let 재고context = React.createContext();

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

  return (
    <HTML많은곳/>
  )
}

같은 state 값을 공유하고 싶으면 context부터 만들어야한다. createContext()라는 함수를 이용하여 변수를 만들어 주면 된다. 그럼 이 변수가 바로 컴포넌트가 되는 것이다.

//App.js
let 재고context = React.createContext();

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

  return (
    <HTML많은곳/>
    <재고context.Provider value={재고}>
      <카드레이아웃3개생성하는부분/>
    </재고context.Provider>
    
  )
}

위에서 만든 컴포넌트로 state 값 공유를 원하는 컴포넌트들을 <Provider></Provider>로 감싸 준다. 그리고 value={state이름} 이렇게 공유할 state를 집어넣으면 된다.

이제 작업 하나만 해주면 provider안에 있는 모든 HTML과 컴포넌트는 제고 state를 이용 가능하다.

//App.js
import React, {useState, useContext} from 'react';

function Card(){
  let 재고 = useContext(재고context);

  return (
    <HTML많은곳/>
    <div>{재고[0]}</div>
  )
}

state를 사용하고 싶으면 useContext()라는 훅을 이용해서 사용을 원하는 context를 불러오면 된다. let 재고라는 변수에 아까 저장해놨던 재고라는 state 데이터가 그대로 들어있다.

앞에서 말한 것과 같이 일반적으로 리액트 데이터는 부모로부터 자식으로 props를 통해 탑-다운으로 전달되는데, 이 단계가 너무 많아진다거나 전달을 여러곳에 해줘야하는 경우에 전역 스토어에 데이터를 저장하고 이를 데이터가 필요한 컴포넌트에 따로 공유할 수 있다.
어떤 데이터를 전역/로컬에 저장할 것인지는 개발자가 선택해야한다. 몇단계만 전달하면 되거나 굳이 전역으로 관리할 필요 없는 데이터를 전역 스토어에 넣는 것은 코드의 관리 측면에서도 좋지 않다.

출처 코딩애플