[React] - props 대신 Context API

리액트에서 자식 컴포넌트가 부모 컴포넌트의 state를 사용할 땐 props를 전송해야 했다. 그런데 만약 여러 겹으로 연결된 중첩된 컴포넌트들 사이에서 state를 가져다 쓰려면 어떻게 해야 할까? 매번 props를 여러번 전송해야 하기 때문에 복잡하고 번거롭다. Context API 문법이나 Redux 같은 외부 라이브러리를 쓰면 더 간단하게 컴포넌트를 사용할 수 있는데, 오늘은 Context API에 대해 알아보도록 하자.

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

재고를 나타내는 stock이라는 state를 App 컴포넌트에 만들고, 이 컴포넌트를 Tab 컴포넌트에서 사용한다고 가정해보자. Context API 문법을 쓰면 props 전송 없이도 Tab 컴포넌트에서 stock 사용이 가능하다.

이를 위해 먼저 createContext()라는 함수를 가져와 context를 하나 생성한다. (context는 state 보관함 같은 역할을 한다.)

/* App.js */

export let Context1 = React.createContext();

function App(){
  let [stock, setStock] = useState([10,11,12]);

  (생략)
}

위에서 생성했던 Context1로 원하는 곳을 감싼 뒤 공유하고자 하는 state를 value 안에다 다 적는다. 이렇게 하면 Context1으로 감싼 모든 컴포넌트와 그 자식 컴포넌트는 state를 props 전송없이 직접 사용이 가능해진다.

/* App.js */
export let stockContext = React.createContext();

function App(){
  let [stock, setStock] = useState([10,11,12]);

  return (
    <Context1.Provider value={ {재고, desserts} }>
      <Detail desserts={desserts}/>
    </Context1.Provider>
    
  )
}

📌 Context 안에 있던 state 사용하기

1. 만들어둔 Context를 import 해온다.
2. useContext() 안에 넣는다.
   -> 이제 해당 자리에 공유했던 state가 전부 남게 된다. 이걸 사용하면 됨!

/* Detail.js */
import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js'; // 1. Context1 import하기

function Detail(){
  let {stock} = useContext(Context1) // 2. useContext() 안에 담기, 얘는 Context 해체해주는 함수임

  return (
    <div>{stock}</div>
  )

이렇게 하면 해당 자리에 공유했던 모든 state가 남으므로 변수에 담아서 가져다 쓰거나 하면 된다. Detail 안에 있는 모든 자식 컴포넌트도 useContext()를 쓰면 자유롭게 stock state를 사용 가능하다.