React 쇼핑몰(Context API)

리액트에서 state를 여러 컴포넌트 간에 공유하고 싶을 때, Context API를 사용하여 props 전송 없이도 state를 공유할 수 있습니다.

 

1. createContext() 함수로 Context 생성

(App.js)

export let Context1 = createContext();

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

  (생략)
}

먼저, createContext() 함수를 사용하여 Context 객체를 생성합니다. 이 객체는 state의 보관함 역할을 합니다.

 

2. Provider로 컴포넌트 감싸기

(App.js)

export let Context1 = createContext();

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

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

공유하고 싶은 state와 state 변경 함수 등을 value 속성으로 설정하여 Provider 컴포넌트로 감싸줍니다.

그러면 Provider 컴포넌트가 Context 객체를 사용하여 state를 다른 컴포넌트에 전달할 수 있도록 도와줍니다.

공유를 원하는 state는 value안에 적으면 됩니다.

 

3. useContext()로 state 사용하기

(Detail.js)

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

function Detail(){
  let {재고} = useContext(Context1)

  return (
    <div>{재고}</div>
  )
}

useContext() 함수를 사용해서 가져오길 원하는 state를 가져올 수 있습니다.

먼저 만들었던 Context를 import하고, useContext() 안에 넣으면 공유했던 state가 남게됩니다.

 

다만, Context API도 단점이 있습니다.

state 변경 시 다른 컴포넌트까지 전부 재랜더링되며, useContext()를 사용하고 있는 컴포넌트는 다른 파일에서 재사용할 때 Context를 import 하는게 번거로워 질 수 있습니다.

그래서 보통 redux 같은 외부라이브러리를 사용해서 state를 공유하는 방법을 많이들 사용합니다.