\ub9ac\uc561\ud2b8\ub294 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ucc98\ub9ac\ud558\ub294 \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \ud3fc\uc740 \uc0ac\uc6a9\uc790\uc640 \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\ub294 \uc5ec\ub7ec \ubc29\ubc95 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud3fc\uc744 \ub9cc\ub4e4\uace0 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ucc28\uc774\uc810\uc5d0 \ub300\ud574\uc11c\ub3c4 \uc790\uc138\ud788 \uc124\uba85\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c \ud3fc\uc744 \ub9cc\ub4dc\ub294 \uac83\uc740 \uc790\uc8fc \ud544\uc694\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 HTML\uacfc \uc720\uc0ac\ud55c JSX\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud3fc\uc744 \uc120\uc5b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \ud3fc \uc694\uc18c\ub4e4\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\nimport React, { useState } from 'react';\n\nconst MyForm = () => {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n\n const handleSubmit = (event) => {\n event.preventDefault();\n alert(`\uc774\ub984: ${name}, \uc774\uba54\uc77c: ${email}`);\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <label>\n \uc774\ub984:\n <input \n type=\"text\" \n value={name} \n onChange={(e) => setName(e.target.value)} \n \/>\n <\/label>\n <br \/>\n <label>\n \uc774\uba54\uc77c:\n <input \n type=\"email\" \n value={email} \n onChange={(e) => setEmail(e.target.value)} \n \/>\n <\/label>\n <br \/>\n <button type=\"submit\">\uc81c\ucd9c<\/button>\n <\/form>\n );\n};\n\nexport default MyForm;\n <\/code><\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 \uae30\ubcf8\uc801\uc778 \ub9ac\uc561\ud2b8 \ud3fc\uc744 \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\uc790\ub85c\ubd80\ud130 \uc774\ub984\uacfc \uc774\uba54\uc77c\uc744 \uc785\ub825\ubc1b\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uac12\uc740 \uac01\uac01 name<\/code>\uacfc email<\/code> \uc0c1\ud0dc(state)\ub85c \uad00\ub9ac\ub429\ub2c8\ub2e4.<\/p>\n2. \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Controlled Components)<\/h2>\n
\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud3fc \uc785\ub825\uac12\uc744 \uc0c1\ud0dc(state)\ub85c \uad00\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud558\ub294 \uac12\uc744 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\uc640 \ub3d9\uae30\ud654\ud558\ubbc0\ub85c, \uc785\ub825\uac12\uc774 \uc0c1\ud0dc\uc5d0 \uae30\ubc18\ud558\uc5ec \ud56d\uc0c1 \ucd5c\uc2e0 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
2.1 \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 \uc608\uc81c<\/h3>\n\nconst ControlledForm = () => {\n const [inputValue, setInputValue] = useState('');\n\n const handleInputChange = (event) => {\n setInputValue(event.target.value);\n };\n\n return (\n <div>\n <input \n type=\"text\" \n value={inputValue} \n onChange={handleInputChange} \n \/>\n <p>\uc785\ub825\uac12: {inputValue}<\/p>\n <\/div>\n );\n};\n <\/code><\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c \uc0ac\uc6a9\uc790\ub294 \uc785\ub825 \ud544\ub4dc\uc5d0 \uac12\uc744 \uc785\ub825\ud558\uba74 inputValue<\/code> \uc0c1\ud0dc\uac00 \uc5c5\ub370\uc774\ud2b8\ub418\uace0, \uc774 \uc0c1\ud0dc\uac00 <p><\/code> \uc694\uc18c\uc5d0 \uc989\uc2dc \ubc18\uc601\ub429\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc785\ub825 \ud544\ub4dc\uc758 \uac12\uacfc \uc0c1\ud0dc\ub97c \ub3d9\uae30\ud654\ud569\ub2c8\ub2e4.<\/p>\n3. \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Uncontrolled Components)<\/h2>\n
\ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc804\ud1b5\uc801\uc778 HTML \ubc29\uc2dd\uc758 \ud3fc\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4. \uc774 \ubc29\uc2dd\uc5d0\uc11c\ub294 ref\ub97c \uc0ac\uc6a9\ud558\uc5ec DOM \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud569\ub2c8\ub2e4. \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\ub85c \uc785\ub825\uac12\uc744 \uad00\ub9ac\ud558\ub294 \ub300\uc2e0, DOM\uc758 \ud604\uc7ac \uc0c1\ud0dc\ub97c \uc9c1\uc811 \ucc38\uc870\ud569\ub2c8\ub2e4.<\/p>\n
3.1 \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 \uc608\uc81c<\/h3>\n\nconst UncontrolledForm = () => {\n const inputRef = React.useRef();\n\n const handleSubmit = (event) => {\n event.preventDefault();\n alert(`\uc785\ub825\uac12: ${inputRef.current.value}`);\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input type=\"text\" ref={inputRef} \/>\n <button type=\"submit\">\uc81c\ucd9c<\/button>\n <\/form>\n );\n};\n <\/code><\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 inputRef<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc785\ub825 \ud544\ub4dc\uc5d0 \ub300\ud574 \ucc38\uc870\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \ud3fc \uc81c\ucd9c \uc2dc, inputRef.current.value<\/code>\ub97c \ud1b5\ud574 \uc785\ub825\uac12\uc744 \uac00\uc838\uc640 \uc54c\ub9bc\ucc3d\uc5d0 \ucd9c\ub825\ud569\ub2c8\ub2e4. \uc774\ub294 \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ud2b9\uc9d5\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n4. \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 vs \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8<\/h2>\n
\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc8fc\ub41c \ucc28\uc774\uc810\uc740 \uac12 \uad00\ub9ac \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub9ac\uc561\ud2b8 \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc785\ub825\uac12\uc744 \uad00\ub9ac\ud558\ub294 \ubc18\uba74, \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub294 DOM\uc744 \ud1b5\ud574 \uc9c1\uc811 \uac12\uc744 \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n
4.1 \uc7a5\uc810\uacfc \ub2e8\uc810<\/h3>\n\n- \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc7a5\uc810:<\/strong> \uc785\ub825\uac12\uc774 \uc0c1\ud0dc\uc640 \ub3d9\uae30\ud654\ub418\uc5b4, \ub2e4\uc591\ud55c \uc81c\uc5b4 \ubc0f \uac80\uc99d\uc774 \uc6a9\uc774\ud569\ub2c8\ub2e4.<\/li>\n
- \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub2e8\uc810:<\/strong> \uc785\ub825\uac12\uc774 \ub9ce\uc744 \uacbd\uc6b0 \uc131\ub2a5 \uc800\ud558\ub97c \ucd08\ub798\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc7a5\uc810:<\/strong> \ub2e8\uc21c\ud558\uace0 \uc131\ub2a5\uc774 \uc88b\uc73c\uba70, \ubcf5\uc7a1\ud55c \uc0c1\ud0dc \uad00\ub9ac\uac00 \ud544\uc694 \uc5c6\ub294 \uacbd\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n
- \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub2e8\uc810:<\/strong> \uc0c1\ud0dc \uae30\ubc18\uc758 \ub3d9\uc801 \uc5c5\ub370\uc774\ud2b8\uac00 \uc5b4\ub835\uace0, \ud3fc \uac80\uc99d\uc744 \uc704\ud55c \ucd94\uac00 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
5. \uc880 \ub354 \ubcf5\uc7a1\ud55c \ud3fc \ucc98\ub9ac<\/h2>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c \ubcf5\uc7a1\ud55c \ud3fc\uc744 \ucc98\ub9ac\ud560 \ub54c\ub294 \uc5ec\ub7ec \uc785\ub825 \ud544\ub4dc\uc640 \ub2e4\uc591\ud55c \uc0c1\ud0dc \uad00\ub9ac\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc218\ud589\ud574\uc57c \ud569\ub2c8\ub2e4. \uc5ec\ub7ec \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc870\ud569\ud558\uc5ec \uc0ac\uc6a9\ud558\uac70\ub098, \ub77c\uc774\ube0c\ub7ec\ub9ac(\uc608: Formik, React Hook Form \ub4f1)\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\ub3c4 \uace0\ub824\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
5.1 Formik \ub77c\uc774\ube0c\ub7ec\ub9ac \uc0ac\uc6a9\ud558\uae30<\/h3>\n
Formik\uc740 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ud3fc\uc744 \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\ub294 \uc720\uc6a9\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. Formik\uc744 \uc0ac\uc6a9\ud558\uba74 \uc0c1\ud0dc \uad00\ub9ac\uc640 \uac80\uc99d \ub85c\uc9c1\uc744 \ub2e8\uc21c\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nimport React from 'react';\nimport { Formik, Form, Field, ErrorMessage } from 'formik';\n\nconst MyFormikForm = () => (\n <Formik\n initialValues={{ name: '', email: '' }}\n validate={values => {\n const errors = {};\n if (!values.name) {\n errors.name = '\uc774\ub984\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.';\n }\n if (!values.email) {\n errors.email = '\uc774\uba54\uc77c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.';\n } else if (!\/\\S+@\\S+\\.\\S+\/.test(values.email)) {\n errors.email = '\uc720\ud6a8\ud55c \uc774\uba54\uc77c \uc8fc\uc18c\uac00 \uc544\ub2d9\ub2c8\ub2e4.';\n }\n return errors;\n }}\n onSubmit={(values, { setSubmitting }) => {\n alert(`\uc774\ub984: ${values.name}, \uc774\uba54\uc77c: ${values.email}`);\n setSubmitting(false);\n }}\n >\n {({ isSubmitting }) => (\n <Form>\n <label>\n \uc774\ub984:\n <Field type=\"text\" name=\"name\" \/>\n <\/label>\n <<\/errormessage><\/code><\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 Formik\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc774\ub984\uacfc \uc774\uba54\uc77c \ud544\ub4dc\ub97c \ud3ec\ud568\ud558\ub294 \ud3fc\uc744 \uad6c\ud604\ud588\uc2b5\ub2c8\ub2e4. validation\uc744 \ud1b5\ud574 \ud544\ub4dc \uac12\uc758 \uc720\ud6a8\uc131\uc744 \uac80\uc0ac\ud558\uace0, \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc5d0 \ub530\ub978 \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n
6. \uacb0\ub860<\/h2>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c \ud3fc\uacfc \uc0ac\uc6a9\uc790 \uc785\ub825 \ucc98\ub9ac\ub294 \uae30\ubcf8\uc801\uc778 UI \uad6c\uc131 \uc694\uc18c \uc911 \ud558\ub098\uc774\uba70 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\uc640 \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 \uac01\uac01\uc758 \uc7a5\ub2e8\uc810\uc744 \uc774\ud574\ud558\uace0 \uc0c1\ud669\uc5d0 \ub9de\ub294 \ubc29\uc2dd\uc744 \uc120\ud0dd\ud558\ub294 \uac83\uc774 \ucd5c\uc801\uc758 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ud544\uc694\ud55c \uacbd\uc6b0 Formik\uacfc \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ud65c\uc6a9\ud558\uc5ec \ud3fc \uad00\ub9ac\ub97c \ub354\uc6b1\ub354 \uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc774\ud574\ub97c \ubc14\ud0d5\uc73c\ub85c \ub2e4\uc591\ud55c \ud3fc\uc744 \uad6c\ud604\ud558\uc138\uc694!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"