[React]Context 와 Provider 복습

Author: Pracrobo

example/hook/Context-ex.jsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, useState } from "react";
+
+const ThemeContext = createContext(null);
+const CurrentUserContext = createContext(null);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState("light");
+  const [currentUser, setCurrentUser] = useState(null); // 이 부분을 Provider 로 분리(ex2)
+  return (
+    <ThemeContext value={theme}>
+      <CurrentUserContext
+        value={{
+          currentUser,
+          setCurrentUser,
+        }}
+      >
+        <WelcomePanel />
+        <label>
+          <input
+            type="checkbox"
+            checked={theme === "dark"}
+            onChange={(e) => {
+              setTheme(e.target.checked ? "dark" : "light");
+            }}
+          />
+          Use dark mode
+        </label>
+      </CurrentUserContext>
+    </ThemeContext>
+  );
+}
+
+function WelcomePanel({ children }) {
+  const { currentUser } = useContext(CurrentUserContext);
+  return (
+    <Panel title="Welcome">
+      {currentUser !== null ? <Greeting /> : <LoginForm />}
+    </Panel>
+  );
+}
+
+function Greeting() {
+  const { currentUser } = useContext(CurrentUserContext);
+  return <p>You logged in as {currentUser.name}.</p>;
+}
+
+function LoginForm() {
+  const { setCurrentUser } = useContext(CurrentUserContext);
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const canLogin = firstName.trim() !== "" && lastName.trim() !== "";
+  return (
+    <>
+      <label>
+        First name{": "}
+        <input
+          required
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+        />
+      </label>
+      <label>
+        Last name{": "}
+        <input
+          required
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+        />
+      </label>
+      <Button
+        disabled={!canLogin}
+        onClick={() => {
+          setCurrentUser({
+            name: firstName + " " + lastName,
+          });
+        }}
+      >
+        Log in
+      </Button>
+      {!canLogin && <i>Fill in both fields.</i>}
+    </>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = "panel-" + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  );
+}
+
+function Button({ children, disabled, onClick }) {
+  const theme = useContext(ThemeContext);
+  const className = "button-" + theme;
+  return (
+    <button className={className} disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  );
+}

example/hook/Context-ex2.jsx

@@ -0,0 +1,112 @@
+import { createContext, useContext, useState } from "react";
+
+const ThemeContext = createContext(null);
+const CurrentUserContext = createContext(null);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState("light");
+  return (
+    <MyProviders theme={theme} setTheme={setTheme}>
+      <WelcomePanel />
+      <label>
+        <input
+          type="checkbox"
+          checked={theme === "dark"}
+          onChange={(e) => {
+            setTheme(e.target.checked ? "dark" : "light");
+          }}
+        />
+        Use dark mode
+      </label>
+    </MyProviders>
+  );
+}
+
+function MyProviders({ children, theme, setTheme }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  return (
+    <ThemeContext value={theme}>
+      <CurrentUserContext
+        value={{
+          currentUser,
+          setCurrentUser,
+        }}
+      >
+        {children}
+      </CurrentUserContext>
+    </ThemeContext>
+  );
+}
+
+function WelcomePanel({ children }) {
+  const { currentUser } = useContext(CurrentUserContext);
+  return (
+    <Panel title="Welcome">
+      {currentUser !== null ? <Greeting /> : <LoginForm />}
+    </Panel>
+  );
+}
+
+function Greeting() {
+  const { currentUser } = useContext(CurrentUserContext);
+  return <p>You logged in as {currentUser.name}.</p>;
+}
+
+function LoginForm() {
+  const { setCurrentUser } = useContext(CurrentUserContext);
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const canLogin = firstName !== "" && lastName !== "";
+  return (
+    <>
+      <label>
+        First name{": "}
+        <input
+          required
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+        />
+      </label>
+      <label>
+        Last name{": "}
+        <input
+          required
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+        />
+      </label>
+      <Button
+        disabled={!canLogin}
+        onClick={() => {
+          setCurrentUser({
+            name: firstName + " " + lastName,
+          });
+        }}
+      >
+        Log in
+      </Button>
+      {!canLogin && <i>Fill in both fields.</i>}
+    </>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = useContext(ThemeContext);
+  const className = "panel-" + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  );
+}
+
+function Button({ children, disabled, onClick }) {
+  const theme = useContext(ThemeContext);
+  const className = "button-" + theme;
+  return (
+    <button className={className} disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  );
+}

example/reducer.md

@@ -0,0 +1 @@
+[도움](https://ko.react.dev/learn/scaling-up-with-reducer-and-context)