Context API 사용법

Context 파일 만들기

// Context.js
// Context 만들기

import { createContext } from 'react';

const Context = createContext();
export default Context;

-> Context 객체를 만듭니다

Provider 파일 만들기

// ContextProvider.js
// Provider, value 지정

import Context from '../Context';
import data from '../data';

const ContextProvider = ({ children }) => {
  // ex)
  const [products, setProducts] = useState(data);
  ...
  
  return (
    <Context.Provider value={products}>
      {children}
    </Context.Provider>
  )
}

export default ContextProvider

-> 최상위 컴포넌트 에 바로 Provider를 사용해도 괜찮지만 Provider.js 파일을
따로 만들어 관리하는 것이 더 깔끔합니다.

최상위 컴포넌트 감싸기

// App.js
// 최상위 컴포넌트 감싸기
import ContextProvider from '../ContextProvider';
import Product from '../Product';

...

function App() {
  return (
    <ContextProvider>
      <Header />
      <Product />
      <Footer />
    </ContextProvider>
  );
}

export default App;

-> 따로 만들어준 Provider 파일로 최상위 컴포넌트인 App.js 내부를 감싸주어
하위 컴포넌트 어느 곳에서도 Context를 이용해 value를 가져올 수 있도록 만들어줍니다.

가져오기

// product.js
import { useContext } from 'react';
import Context from '../Context';

const Product = () => {
  const { products } = useContext(Context);
  
  return (
    <div className="Products">
      ...
    </div>
  );
}

export default Product;

-> 하위 컴포넌트에서 useContext() 안에 처음 만들어준 Context를 넣어주고
value 값을 가져옵니다.