[React] useContext를 이용해 전역 props전달하기

기존 컴포넌트 간에 데이터를 전달하려면 props를 이용해야 합니다. A>B>C 각각 부모자식관계일 때, A->C로 데이터를 props로 전달하려면 A>B, B>C로 전달해야하는 불편함이 있습니다.

이를 해결하게 위해 useContext를 사용할 수 있습니다.

 

조상 Component에서 내보낼 이름으로 createContext를 해줍니다.

export const DiaryStateContext = React.createContext();

<DiaryStateContext.Provider>로 전달할 요소들을 감싸면 됩니다. 전역 props로 value라는 변수명으로 data를 전달합니다.

    <DiaryStateContext.Provider value={data}>
		<div className="App"><div>
    </DiaryStateContext.Provider>

아래는 실제 적용 코드입니다.

export const DiaryStateContext = React.createContext();
export const DiaryDispatchContext = React.createContext();
function App() {
  return (
    <DiaryStateContext.Provider value={data}>
      <DiaryDispatchContext.Provider
        value={{
          onCreate,
          onEdit,
          onRemove,
        }}
      >
        <BrowserRouter>
          <div className="App">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="new" element={<New />} />
              <Route path="edit/:id" element={<Edit />} />
              <Route path="diary/:id" element={<Diary />} />
            </Routes>
          </div>
        </BrowserRouter>
      </DiaryDispatchContext.Provider>
    </DiaryStateContext.Provider>
  );
}

 

아래는 전역 props를 받아서 사용하는 코드입니다.

1~2 : 위에서 만든 DiaryStateContext를 App컴포넌트로부터 import합니다. 그리고 useContext도 import해줍니다.

3: useContext를 이용해 꺼내서 쓰면 됩니다.

import { DiaryStateContext } from "../App";
import { useContext } from "react";
	const diaryList = useContext(DiaryStateContext);