[React]context api

props drilling을 피하기 위한 전역상태관리

 

1. context.js파일 만들어서 context 생성!

// context/SampleContext.js

import { createContext } from "react";

export const SampleContext = createContext(null);

2. 최상단에 context provider 묶어주기

import { SampleContext } from "./context/SampleContext";

return (
    <SampleContext.Provider
      value={{ 전달할것들 }}
    >
...
    </SampleContext.Provider>
  );

3. 사용할 곳에서 context에서 가져오기!

import React, { useContext } from "react";
import { SampleContext } from "../context/SampleContext";

...
const { 가져올것들 } = useContext(SampleContext);