{"id":67,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=67"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"hook","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=67","title":{"rendered":"Hook"},"content":{"rendered":"

1. Hook<\/h1>\n

Hook\uc740 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c React \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ud2b9\ubcc4\ud55c \ud568\uc218\ub2e4.
\n\uc774\ub984\uc774 \ud56d\uc0c1 use<\/code>\ub85c \uc2dc\uc791\ud558\ub294 \uac83\uc774 \ud2b9\uc9d5\uc774\ub2e4.<\/p>\n

1.1. Hook \uc0ac\uc6a9 \uaddc\uce59<\/h2>\n

Hook\uc744 \uc0ac\uc6a9\ud560 \ub54c \ubc18\ub4dc\uc2dc \uc9c0\ucf1c\uc57c \ud560 \ub450 \uac00\uc9c0 \uaddc\uce59\uc774 \uc788\ub2e4.<\/p>\n\n\n\n\n\n\n
\uaddc\uce59<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
\ucef4\ud3ec\ub10c\ud2b8 \ucd5c\uc0c1\uc704\uc5d0\uc11c\ub9cc \ud638\ucd9c<\/strong><\/td>\nif\ubb38, for\ubb38, \uc911\ucca9 \ud568\uc218 \uc548\uc5d0\uc11c \ud638\ucd9c\ud558\uba74 \uc548 \ub41c\ub2e4<\/td>\n<\/tr>\n
React \ud568\uc218\uc5d0\uc11c\ub9cc \ud638\ucd9c<\/strong><\/td>\n\uc77c\ubc18 JavaScript \ud568\uc218\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\/\/ \u274c \uc798\ubabb\ub41c \uc608\uc2dc\nfunction App() {\n  if (condition) {\n    const [count, setCount] = useState(0); \/\/ if\ubb38 \uc548\uc5d0\uc11c \ud638\ucd9c \u2192 \uc624\ub958!\n  }\n}\n\n\/\/ \u2705 \uc62c\ubc14\ub978 \uc608\uc2dc\nfunction App() {\n  const [count, setCount] = useState(0); \/\/ \ucd5c\uc0c1\uc704\uc5d0\uc11c \ud638\ucd9c\n}\n<\/code><\/pre>\n
1.2. \uc790\uc8fc \uc4f0\ub294 Hook \ubaa9\ub85d<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Hook<\/th>\n\uc6a9\ub3c4<\/th>\n<\/tr>\n<\/thead>\n
useState<\/code><\/td>\n\uc0c1\ud0dc(\ub370\uc774\ud130) \uad00\ub9ac<\/td>\n<\/tr>\n
useEffect<\/code><\/td>\n\ud654\uba74 \ud45c\uc2dc\/\uc0ac\ub77c\uc9d0\/\uc5c5\ub370\uc774\ud2b8 \uc2dc \uc2e4\ud589<\/td>\n<\/tr>\n
useRef<\/code><\/td>\nDOM \uc694\uc18c \uc9c1\uc811 \uc811\uadfc, \ub80c\ub354\ub9c1 \uc5c6\uc774 \uac12 \uc800\uc7a5<\/td>\n<\/tr>\n
useContext<\/code><\/td>\n\ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc804\uccb4\uc5d0 \ub370\uc774\ud130 \uc804\ub2ec<\/td>\n<\/tr>\n
useMemo<\/code><\/td>\n\ubcf5\uc7a1\ud55c \uacc4\uc0b0 \uacb0\uacfc \uce90\uc2f1 (\uc131\ub2a5 \ucd5c\uc801\ud654)<\/td>\n<\/tr>\n
useCallback<\/code><\/td>\n\ud568\uc218 \uce90\uc2f1 (\uc131\ub2a5 \ucd5c\uc801\ud654)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\uc774 \ucc55\ud130\uc5d0\uc11c\ub294 \uac00\uc7a5 \ub9ce\uc774 \uc4f0\ub294 useState<\/code>\uc640 useEffect<\/code>\ub97c \uc9d1\uc911\uc801\uc73c\ub85c \ub2e4\ub8ec\ub2e4.<\/p>\n
2. UseState()<\/h1>\n
2.1. State\ub780?<\/h2>\n
State\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub370\uc774\ud130 \uc800\uc7a5\uc18c\ub2e4. \uac12\uc774 \ubcc0\uacbd\ub418\uba74 \ud654\uba74\uc774 \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \uadf8\ub824\uc9c4\ub2e4.<\/p>\n
2.1.1. \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n
import { useState } from "react";\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>\ud69f\uc218: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>\uc99d\uac00<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
2.2. useState \ub3d9\uc791 \uc6d0\ub9ac<\/h2>\n
useState<\/code>\ub294 \ub450 \uac1c\uc758 \uac12\uc744 \ubc30\uc5f4\ub85c \ubc18\ud658\ud55c\ub2e4.<\/p>\n
    \n
  • \uccab \ubc88\uc9f8: \ud604\uc7ac \uc0c1\ud0dc \uac12<\/li>\n
  • \ub450 \ubc88\uc9f8: \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \ud568\uc218<\/li>\n<\/ul>\n
    const [value, setValue] = useState(\ucd08\uae30\uac12);\n<\/code><\/pre>\n
    2.2.1. \uc608\uc81c: \uce74\uc6b4\ud130<\/h3>\n
    function Counter() {\n  const [num, setNum] = useState(0);\n\n  const plus = () => setNum(num + 1);\n  const minus = () => setNum(num - 1);\n\n  return (\n    <div>\n      <h2>{num}<\/h2>\n      <button onClick={plus}>+<\/button>\n      <button onClick={minus}>-<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
    2.3. \uac1d\uccb4\uc640 \ubc30\uc5f4 State \uad00\ub9ac<\/h2>\n
    \n
    Warning<\/strong>: \uc8fc\uc758: \uc9c1\uc811 \uc218\uc815 \uae08\uc9c0!<\/strong><\/p>\n
    \uc0c1\ud0dc \uac1d\uccb4\ub098 \ubc30\uc5f4\uc744 \uc9c1\uc811 \uc218\uc815\ud558\uba74 \uc548 \ub41c\ub2e4. \ubc18\ub4dc\uc2dc \uc0c8\ub85c\uc6b4 \uac1d\uccb4\/\ubc30\uc5f4\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud55c\ub2e4.<\/p>\n
    \uc804\uac1c \uc5f0\uc0b0\uc790<\/strong> \ub97c \uc0ac\uc6a9\ud558\uba74 \ud3b8\ub9ac\ud558\ub2e4.<\/p>\n<\/blockquote>\n

    \n> `…`\uc740 \uac1d\uccb4\ub098 \ubc30\uc5f4\uc758 \ub0b4\uc6a9\ubb3c\uc744 \uaebc\ub0b4\uc11c \ud3bc\uce58\ub294<\/strong> \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubb38\ubc95\uc774\ub2e4.<\/p>\n
    2.3.0.0.0.1. \uc804\uac1c\uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1d\uccb4\ub97c \uc218\uc815<\/h6>\n
    const user = { name: "\ucca0\uc218", age: 20 };\nconst newUser = { ...user, name: "\uc601\ud76c" };\n<\/code><\/pre>\n
    2.3.0.0.0.2. \uc804\uac1c\uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \uac1d\uccb4\ub97c \uc218\uc815<\/h6>\n
    const user = { name: "\ucca0\uc218", age: 20 };\nconst newUser = { name: "\uc601\ud76c", age: user.age };\n<\/code><\/pre>\n
    2.3.0.0.0.3. \uc804\uac1c\uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubc30\uc5f4\uc744 \uc218\uc815<\/h6>\n
    const fruits = ["\uc0ac\uacfc", "\ubc14\ub098\ub098"];\nconst newFruits = [...fruits, "\uc624\ub80c\uc9c0"];\n<\/code><\/pre>\n
    2.3.0.0.0.4. \uc804\uac1c\uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \ubc30\uc5f4\uc744 \uc218\uc815<\/h6>\n
    const fruits = ["\uc0ac\uacfc", "\ubc14\ub098\ub098"];\nconst newFruits2 = fruits.concat("\uc624\ub80c\uc9c0");\n<\/code><\/pre>\n
    <\/Accordion><\/p>\n
    2.3.1. \uc608\uc81c 2: Todo<\/h3>\n
    Todo.css<\/h4>\n
    \/* \uc804\uccb4 \uc601\uc5ed \uc124\uc815 *\/\n.container {\n  max-width: 400px;\n  margin: 50px auto;\n  padding: 20px;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n}\n\n\/* \uc785\ub825\ucc3d\uacfc \ubc84\ud2bc \uac00\ub85c \ubc30\uce58 *\/\n.input-box {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\n\/* \uc785\ub825\ucc3d \ud06c\uae30 \ud655\uc7a5 *\/\n.input-field {\n  flex: 1;\n  padding: 10px;\n}\n\n\/* \ucd94\uac00 \ubc84\ud2bc \ub514\uc790\uc778 *\/\n.add-btn {\n  padding: 10px 20px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  cursor: pointer;\n}\n\n\/* \ubaa9\ub85d \uc2a4\ud0c0\uc77c \ucd08\uae30\ud654 *\/\n.list-box {\n  list-style: none;\n  padding: 0;\n}\n\n\/* \uac1c\ubcc4 \ud56d\ubaa9 \ub514\uc790\uc778 *\/\n.list-item {\n  padding: 10px;\n  border-bottom: 1px solid #eee;\n}\n<\/code><\/pre>\n
    Todo.jsx(\ucd94\uac00)<\/h4>\n
    \ucd94\uac00\n\n```jsx\nimport { useState } from "react";\n\nfunction Todo() {\n  const [todos, setTodos] = useState([]);\n  const [inputValue, setInputValue] = useState("");\n\n  const addTodo = () => {\n    if (inputValue.trim() === "") return;\n    setTodos([...todos, inputValue]);\n    setInputValue("");\n  };\n\n  return (\n    <div className="container">\n      <div className="input-box">\n        <input\n          className="input-field"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          placeholder="\ud560 \uc77c\uc744 \uc785\ub825\ud558\uc138\uc694"\n        \/>\n        <button className="add-btn" onClick={addTodo}>\ucd94\uac00<\/button>\n      <\/div>\n      <ul className="list-box">\n        {todos.map((todo, index) => (\n          <li key={index} className="list-item">{todo}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n```\n\n- \uc0c1\ud0dc \uad00\ub9ac \ubcc0\uc218: todos\ub294 \ud560 \uc77c \ubaa9\ub85d \ubc30\uc5f4\uc744, inputValue\ub294 \uc785\ub825\ucc3d\uc758 \ubb38\uc790\uc5f4\uc744 \uad00\ub9ac\ud55c\ub2e4.\n- \uc0c1\ud0dc \uac31\uc2e0 \ud568\uc218: addTodo \ud568\uc218 \ub0b4\ubd80\uc5d0\uc11c \uc804\uac1c \uad6c\ubb38(...todos)\uc744 \uc0ac\uc6a9\ud558\uc5ec \uae30\uc874 \ubc30\uc5f4\uc744 \ubcf5\uc0ac\ud55c \ud6c4 \uc0c8 \ud56d\ubaa9\uc744 \ucd94\uac00\ud55c\ub2e4.\n<\/code><\/pre>\n
    Todo.jsx(\uc0ad\uc81c)<\/h4>\n
    \uc0ad\uc81c \uae30\ub2a5\uc774 \ud3ec\ud568\ub41c \ub9ac\uc2a4\ud2b8\n\n```jsx\nconst deleteTodo = (index) => {\n  setTodos(todos.filter((_, i) => i !== index));\n};\n\nreturn (\n  <ul>\n    {todos.map((todo, index) => (\n      <li key={index}>\n        {todo} <button onClick={() => deleteTodo(index)}>\uc0ad\uc81c<\/button>\n      <\/li>\n    ))}\n  <\/ul>\n);\n```\n<\/code><\/pre>\n
    3. useEffect()<\/h1>\n
    \ucef4\ud3ec\ub10c\ud2b8\ub0b4\uc758 \ud568\uc218\uac00 \ud638\ucd9c\ub418\ub294 \uc2dc\uc810\uc744 \uc81c\uc5b4\ud558\ub294 \ud6c5
    \nuseEffect<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0 \ub098\ud0c0\ub0a0 \ub54c, \uc0ac\ub77c\uc9c8 \ub54c, \ub610\ub294 \ud2b9\uc815 \uac12\uc774 \ubcc0\ud560 \ub54c \uc2e4\ud589\ud560 \ucf54\ub4dc\ub97c \uc815\uc758\ud55c\ub2e4.<\/p>\n
    3.1. \ubb38\ubc95\uc815\ub9ac<\/h2>\n\n\n\n\n\n\n\n\n\n
    \uc0c1\ud669<\/th>\n\uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n
    \uccab \ub80c\ub354\ub9c1 \uc2dc \uc2e4\ud589 (\ub9c8\uc6b4\ud2b8)<\/td>\nuseEffect(() => {<\/code>
      console.log("\ub9c8\uc6b4\ud2b8");<\/code>
    }, [])<\/code><\/td>\n<\/tr>\n
    \ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \uc2e4\ud589<\/td>\nuseEffect(() => {<\/code>
      console.log("\ub80c\ub354\ub9c1");<\/code>
    })<\/code><\/td>\n<\/tr>\n
    \ud2b9\uc815 \uac12 \ubcc0\uacbd \uc2dc \uc2e4\ud589<\/td>\nuseEffect(() => {<\/code>
      console.log(\uac12);<\/code>
    }, [\uac12])<\/code><\/td>\n<\/tr>\n
    \ucef4\ud3ec\ub10c\ud2b8 \uc81c\uac70 \uc2dc \uc815\ub9ac (\uc5b8\ub9c8\uc6b4\ud2b8)<\/td>\nuseEffect(() => {<\/code>
      console.log("\ub9c8\uc6b4\ud2b8");<\/code>
      return () => console.log("\uc5b8\ub9c8\uc6b4\ud2b8");<\/code>
    }, [])<\/code><\/td>\n<\/tr>\n
    \uac12 \ubcc0\uacbd \uc2dc \uc2e4\ud589 + \uc774\uc804 \uac83 \uc815\ub9ac<\/td>\nuseEffect(() => {<\/code>
      console.log(\uac12);<\/code>
      return () => console.log("\uc815\ub9ac");<\/code>
    }, [\uac12])<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    3.1.1. \ub9c8\uc6b4\ud2b8\uc2dc<\/h3>\n
    \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0 \ucc98\uc74c \ub098\ud0c0\ub0a0 \ub54c \ub2e8 \ud55c \ubc88<\/strong> \uc2e4\ud589\ub41c\ub2e4.
    \n\ube48 \ubc30\uc5f4 []<\/code>\uc744 \uc758\uc874\uc131 \ubc30\uc5f4\ub85c \uc804\ub2ec\ud55c\ub2e4.<\/p>\n
    useEffect(() => {\n  console.log("\ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0 \ub098\ud0c0\ub0a8");\n}, []);\n<\/code><\/pre>\n
    3.1.2. \ub80c\ub354\ub9c1\uc2dc<\/h3>\n
    \uc758\uc874\uc131 \ubc30\uc5f4\uc744 \uc0dd\ub7b5\ud558\uba74 \ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4<\/strong> \uc2e4\ud589\ub41c\ub2e4.
    \n\uc0c1\ud0dc\ub098 props\uac00 \ubc14\ub014 \ub54c\ub9c8\ub2e4 \ub9e4\ubc88 \ud638\ucd9c\ub418\ubbc0\ub85c \uc8fc\uc758\ud574\uc11c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n
    useEffect(() => {\n  console.log("\ub80c\ub354\ub9c1\ub428");\n});\n<\/code><\/pre>\n
    3.1.3. \ud2b9\uc815\uac12 \ubcc0\uacbd\uc2dc<\/h3>\n
    \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \uac12\uc744 \ub123\uc73c\uba74 \uadf8 \uac12\uc774 \ubc14\ub014 \ub54c\ub9c8\ub2e4<\/strong> \uc2e4\ud589\ub41c\ub2e4.<\/p>\n
    const [count, setCount] = useState(0);\n\nuseEffect(() => {\n  console.log("count\uac00 \ubc14\ub01c:", count);\n}, [count]);\n<\/code><\/pre>\n
    3.1.4. \uc5b8\ub9c8\uc6b4\ud2b8\uc2dc<\/h3>\n
    return<\/code>\uc73c\ub85c \uc815\ub9ac \ud568\uc218(cleanup)<\/strong>\ub97c \ubc18\ud658\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0\uc11c \uc0ac\ub77c\uc9c8 \ub54c \uc2e4\ud589\ub41c\ub2e4.
    \n\ud0c0\uc774\uba38, \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ub4f1 \uc815\ub9ac\uac00 \ud544\uc694\ud55c \uacbd\uc6b0\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n
    useEffect(() => {\n  console.log("\ub9c8\uc6b4\ud2b8");\n\n  return () => {\n    console.log("\uc5b8\ub9c8\uc6b4\ud2b8 - \uc815\ub9ac \uc2e4\ud589");\n  };\n}, []);\n<\/code><\/pre>\n
    3.2. \uc2e4\uc2b5: \ub85c\uadf8\uc778<\/h2>\n
    \uc6f9\ube0c\ub77c\uc6b0\uc800\uc758 \ub370\uc774\ud130 \uc800\uc7a5 \uacf5\uac04\uc778 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \ub85c\uadf8\uc778 \uc815\ubcf4\ub97c \uc800\uc7a5\ud558\ub294 \ub85c\uadf8\uc778 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc790<\/p>\n
    App.css<\/h4>\n
    \n\n.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 100vh;\n}\n\n\n.card {\n  background: white;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);\n  border-radius: 10px;\n  padding: 2rem;\n  margin: 2rem auto;\n  width: 90%;\n  max-width: 40rem;\n  text-align: center;\n}\n\n.control {\n  margin: 1rem 0;\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n}\n\n.control label {\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.control input {\n  font: inherit;\n  padding: 0.5rem;\n  border-radius: 6px;\n  border: 1px solid #ccc;\n}\n\n.actions {\n  text-align: center;\n  margin-top: 1rem;\n}\n\n.btn {\n  font: inherit;\n  background: #7a0141;\n  border: 1px solid #7a0141;\n  color: white;\n  padding: 0.75rem 2rem;\n  border-radius: 30px;\n  cursor: pointer;\n}\n\n.btn:disabled {\n  background: #ccc;\n  border-color: #ccc;\n  color: #666;\n  cursor: not-allowed;\n}\n\n.btn:hover:not(:disabled) {\n  background: #a40256;\n  border-color: #a40256;\n}\n\n<\/code><\/pre>\n
    App.jsx<\/h4>\n
    import { useState, useEffect } from "react";\nimport ".\/App.css";\n\nconst App = () => {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n  const [email, setEmail] = useState("");\n  const [password, setPassword] = useState("");\n\n  useEffect(() => {\n    const storedLoginInfo = localStorage.getItem("isLoggedIn");\n    if (storedLoginInfo === "1") {\n      setIsLoggedIn(true);\n    }\n  }, []);\n\n  const loginHandler = (e) => {\n    e.preventDefault();\n    localStorage.setItem("isLoggedIn", "1");\n    setIsLoggedIn(true);\n  };\n\n  const logoutHandler = () => {\n    localStorage.removeItem("isLoggedIn");\n    setIsLoggedIn(false);\n    setEmail("");\n    setPassword("");\n  };\n\n  return (\n    <div className="container">\n      <header className="main-header">\n        <h1>React Auth Demo<\/h1>\n        {isLoggedIn && (\n          <nav className="nav">\n            <button className="btn" onClick={logoutHandler}>\n              \ub85c\uadf8\uc544\uc6c3\n            <\/button>\n          <\/nav>\n        )}\n      <\/header>\n      <main>\n        {!isLoggedIn ? (\n          <div className="card login">\n            <form onSubmit={loginHandler}>\n              <div className="control">\n                <label htmlFor="email">\uc774\uba54\uc77c<\/label>\n                <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} \/>\n              <\/div>\n              <div className="control">\n                <label htmlFor="password">\ube44\ubc00\ubc88\ud638<\/label>\n                <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} \/>\n              <\/div>\n              <div className="actions">\n                <button type="submit" className="btn">\n                  \ub85c\uadf8\uc778\n                <\/button>\n              <\/div>\n            <\/form>\n          <\/div>\n        ) : (\n          <div className="card home">\n            <h1>\ud658\uc601\ud569\ub2c8\ub2e4!<\/h1>\n            <p>\ub85c\uadf8\uc778\uc5d0 \uc131\uacf5\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n          <\/div>\n        )}\n      <\/main>\n    <\/div>\n  );\n};\n\nexport default App;\n\n<\/code><\/pre>\n
    3.3. \ucf54\ub4dc \ubd84\uc11d<\/h2>\n
    3.3.1. \uc0c1\ud0dc(State) \uc120\uc5b8<\/h3>\n
    const [isLoggedIn, setIsLoggedIn] = useState(false);\nconst [email, setEmail] = useState("");\nconst [password, setPassword] = useState("");\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \ubcc0\uc218<\/th>\n\ucd08\uae30\uac12<\/th>\n\uc5ed\ud560<\/th>\n<\/tr>\n<\/thead>\n
    isLoggedIn<\/code><\/td>\nfalse<\/code><\/td>\n\ub85c\uadf8\uc778 \uc5ec\ubd80 \u2014 true\uba74 \ud648 \ud654\uba74, false\uba74 \ub85c\uadf8\uc778 \ud654\uba74<\/td>\n<\/tr>\n
    email<\/code><\/td>\n""<\/code><\/td>\n\uc774\uba54\uc77c \uc785\ub825\ucc3d\uc758 \ud604\uc7ac \uac12<\/td>\n<\/tr>\n
    password<\/code><\/td>\n""<\/code><\/td>\n\ube44\ubc00\ubc88\ud638 \uc785\ub825\ucc3d\uc758 \ud604\uc7ac \uac12<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    3.3.2. useEffect \u2014 \uc7ac\ubc29\ubb38 \uccb4\ud06c<\/h3>\n
    useEffect(() => {\n  const storedLoginInfo = localStorage.getItem("isLoggedIn");\n  if (storedLoginInfo === "1") {\n    setIsLoggedIn(true);\n  }\n}, []);\n<\/code><\/pre>\n