context

context로 전역상태관리하는 법

context폴더하나 만들고, 관리하고자하는 useState를 context로 정의한다.
LetterContext.jsx라는 파일을 만든다(편지 데이터를 관리할 것 임)

import { createContext, useState } from "react";
import fakeData from "fakeData.json";

export const LetterContext = createContext(null);

const LetterContextProvider = ({ children }) => {
  const [data, setData] = useState(fakeData);
  return (
    <LetterContext.Provider value={{ data, setData }}>
      {children}
    </LetterContext.Provider>
  );
};
export default LetterContextProvider;

export const LetterContext = createContext(null);
LetterContext라는 이름의 context를 쓰겠다는 의미. 그냥 정의만 해놈
Provider함수는 LetterContext.Provider 컴포넌트를 생성하고, 해당 컴포넌트의 하위에 있는 모든 자식 컴포넌트에 데이터를 제공.(LetterContextProvider로 App(우리만든것이 다 담겨진 컴포넌트)를 감싸서 App을 하위컴포넌트로 할 것임)
함수는 props로 children을 받아와서 해당 컴포넌트를 하위 컨텍스트로 포함시킵니다.

LetterContextProvider 하위에 있는 children들은 data,setData를 사용할 수 있게 됌

사용하고 싶은 곳에서 props를 내려받는 것이아닌,
바로!!!!!사용가능

const { data, setData } = useContext(LetterContext);

이렇게만 정의하면 굳이 어딘가에서 props를 전달받지 않고도 데이터를 사용할 수 있다.

index.jsx에서

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <LetterContextProvider>
    <App />
    <GlobalStyle />
  </LetterContextProvider>
);

요런식으로 app의 상위에 감싸면, app을 children으로 사용할 수 있다!!