1. 탐구

1. Context 세팅

1. CRA

• npx create-react-app . —template typescript : 현재 폴더에 typescript 템플릿으로 생성

2. Context 생성

// components/ThemeProvider.tsx
const ThemeContext = createContext({
  theme: "light",
  toggleTheme: () => {},
});

3. Context.Provider로 상태값 공유

// components/ThemeProvider.tsx
const ThemeProvider = ({ children }: PropsWithChildren) => {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => {
    setTheme((prevTheme) => {
      return prevTheme === "light" ? "dark" : "light";
    });
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider};

// App.tsx
export default function App (){
	return (
		<ThemeProvider>
			<Main />
		</ThemeProvider>
	)
}

4. useContext로 Context 값에 접근

// components/ThemeProvider.tsx
const useTheme = () => {
	if(!context) throw new Error("useTheme must be used within a ThemeProvider");
	return useContext(ThemeContext);
}

// components/Main.tsx
export default function Main () {
	const {theme,toggleTheme} = useTheme();
	return (
		<div>
      {theme}
      <button onClick={toggleTheme}>toggle</button>
    </div>
	)
}

2. Context API와 렌더링 이슈

1. 원시값을 Context로 공유했을 때

// src/App.tsx
export default function App() {
  return (
    <div className="App">
      <ThemeProvider>
        <Main />
        <Sub value="in ThemeProvider" />
      </ThemeProvider>
    </div>
  );
}