{"id":38978,"date":"2024-11-02T02:36:02","date_gmt":"2024-11-02T02:36:02","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38978"},"modified":"2024-11-26T06:42:44","modified_gmt":"2024-11-26T06:42:44","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8%ec%97%90%ec%84%9c-%ed%8c%9d%ec%97%85-%eb%b0%8f-%eb%aa%a8%eb%8b%ac-%eb%a7%8c%eb%93%a4%ea%b8%b0-%ed%81%b4%eb%a6%ad-%ec%9d%b4%eb%b2%a4%ed%8a%b8%ec%99%80-%ec%83%81%ed%83%9c","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38978\/","title":{"rendered":"\ub9ac\uc561\ud2b8\uc5d0\uc11c \ud31d\uc5c5 \ubc0f \ubaa8\ub2ec \ub9cc\ub4e4\uae30, \ud074\ub9ad \uc774\ubca4\ud2b8\uc640 \uc0c1\ud0dc\ub85c \ud31d\uc5c5 \uc81c\uc5b4\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\ub9ac\uc561\ud2b8\ub294 \ub3d9\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ub3c4\uad6c\ub85c, \ud31d\uc5c5(modal)\uc774\ub098 \uc54c\ub9bc\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud31d\uc5c5\uacfc \ubaa8\ub2ec\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95, \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \ud1b5\ud574 \uc0c1\ud0dc\ub97c \uc81c\uc5b4\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc758 \ub0b4\uc6a9\ub4e4\uc744 \ud1b5\ud574 \uc5ec\ub7ec\ubd84\uc740 \ud6a8\uacfc\uc801\uc778 \ud31d\uc5c5 \ubc0f \ubaa8\ub2ec\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\ub294 \ub2a5\ub825\uc744 \uac16\ucd94\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

1. \ud31d\uc5c5 \ubc0f \ubaa8\ub2ec\uc758 \uc815\uc758<\/h2>\n

\ud31d\uc5c5\uacfc \ubaa8\ub2ec\uc740 \uc0ac\uc6a9\uc790\uac00 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud2b9\uc815 \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub3c4\ub85d \uc720\ub3c4\ud558\ub294 \ubb38\uc11c\uc785\ub2c8\ub2e4. \ubcf4\ud1b5 \uc804\ud658 \ud6a8\uacfc\ub97c \ud1b5\ud574 \ud654\uba74\uc758 \uac00\uc2dc\uc801\uc778 \uc694\uc18c\ub97c \ub36e\uc5b4 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc911\uc694 \uc815\ubcf4\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/p>\n

\ud31d\uc5c5<\/strong>: \uc77c\ubc18\uc801\uc73c\ub85c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc0c8\ub85c\uc6b4 \ucc3d\uc744 \uc5f4\uc5b4 \ubcf4\uc5ec\uc8fc\ub294 \uacbd\uc6b0\ub97c \ub9d0\ud569\ub2c8\ub2e4.<\/li>\n

\ubaa8\ub2ec<\/strong>: \ud604\uc7ac \ud398\uc774\uc9c0\uc758 \ub0b4\uc6a9\uc744 \uac00\ub9ac\ub294 \ubc18\uba74 \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \uc791\uc5c5\uc744 \uc644\ub8cc\ud560 \ub54c\uae4c\uc9c0 \ub2e4\ub978 \uc791\uc5c5\uc744 \uc218\ud589\ud558\uc9c0 \ubabb\ud558\ub3c4\ub85d \uac15\uc81c\ud558\ub294 \ucc3d\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n
2. \ub9ac\uc561\ud2b8\uc5d0\uc11c \ubaa8\ub2ec \ub9cc\ub4e4\uae30<\/h2>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 \uc0c1\ud0dc(state)\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubaa8\ub2ec\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uac04\ub2e8\ud55c \ubaa8\ub2ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n
2.1. \ubaa8\ub2ec \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\n
import React, { useState } from 'react';\n\n\/\/ Modal \ucef4\ud3ec\ub10c\ud2b8\nconst Modal = ({ isOpen, onClose }) => {\n if (!isOpen) return null;\n\n return (\n \n \n \u00d7<\/span>\n \ubaa8\ub2ec \uc81c\ubaa9<\/h2>\n \uc5ec\uae30\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc138\uc694.<\/p>\n

\ubaa8\ub2ec \uc81c\ubaa9<\/h2>\n
\uc5ec\uae30\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc138\uc694.<\/p>\n

\ub9ac\uc561\ud2b8 \ubaa8\ub2ec \uc608\uc81c<\/h1>\n

\ub9ac\uc561\ud2b8 \ubaa8\ub2ec \uc608\uc81c<\/h1>\n

\ubaa8\ub2ec \uc81c\ubaa9<\/h2>\n
\uc5ec\uae30\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc138\uc694.<\/p>\n

4.1. CSS \uc560\ub2c8\uba54\uc774\uc158 \ucd94\uac00<\/h3>\n

\ub9ac\uc561\ud2b8 \ubaa8\ub2ec \uc608\uc81c<\/h1>\n

3.1. \ud074\ub9ad \uc774\ubca4\ud2b8 \ucc98\ub9ac<\/h3>\nconst App = () => {\n const [isModalOpen, setModalOpen] = useState(false);\n\n const openModal = () => setModalOpen(true);\n const closeModal = () => setModalOpen(false);\n\n return (\n \n \ub9ac\uc561\ud2b8 \ubaa8\ub2ec \uc608\uc81c<\/h1>\n

\ub9ac\uc561\ud2b8 \ubaa8\ub2ec \uc608\uc81c<\/h1>\n

\ubaa8\ub2ec \uc81c\ubaa9<\/h2>\n \uc5ec\uae30\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc138\uc694.<\/p>\n

\ubaa8\ub2ec \uc81c\ubaa9<\/h2>\n
\uc5ec\uae30\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc138\uc694.<\/p>\n