"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", br: "br", code: "code", figure: "figure", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {MDXImage} = _components; if (!MDXImage) _missingMdxReference("MDXImage", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { children: "여는 말" }), "\n", _jsxs(_components.p, { children: ["최근 회원가입 카드, 검색 패널 등 ", _jsx(_components.code, { children: "form" }), "을 사용해야 하는 컴포넌트를 구현해야 했었는데,\n레거시 코드를 찾아보던 중에 ", _jsx(_components.code, { children: "React Hook Form" }), "으로로 구현한 ", _jsx(_components.code, { children: "form" }), " 컴포넌트를 보게 됐어요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "React Hook Form" }), "를 통해 효율적인 ", _jsx(_components.code, { children: "form" }), "을 구현하기 위해 공식문서에서 찾아본 내용을 핵심만 정리해봤어요."] }), "\n", _jsx(_components.h2, { children: "React Hook Form" }), "\n", _jsxs(_components.p, { children: ["공식문서에서는 ", _jsx(_components.code, { children: "React Hook Form" }), "의 장점으로 다음과 같은 내용들을 언급하고 있어요."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["개발자들을 위한 직관적이고 완벽한 ", _jsx(_components.code, { children: "form" }), " 관련 기능을 제공해요."] }), "\n", _jsx(_components.li, { children: "HTML 마크업 기반의 유효성 검사를 할 수 있어요." }), "\n", _jsx(_components.li, { children: "종송석이 없는 작은 라이브러리예요." }), "\n", _jsx(_components.li, { children: "레런더링, 유효성 검사 계산을 최소화해요." }), "\n", _jsx(_components.li, { children: "폼의 상태는 로컬이기 때문에 다른 의존성 없이 쉽게 사용할 수 있어요." }), "\n", _jsx(_components.li, { children: "일관된 유효성 검사로 최고의 사용자 경험을 제공해요." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["이런 장점들과 현재 프로젝트의 기술 스택이 잘 맞는다고 판단해 ", _jsx(_components.code, { children: "React Hook Form" }), "을 도입하게 됐어요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "React hook Form" }), "은 ", _jsx(_components.code, { children: "form" }), "을 위한 여러 API를 제공하는데, 그 중에서 ", _jsx(_components.code, { children: "form" }), "의 유효성 검사를 추가할 수 있는 ", _jsx(_components.code, { children: "useForm" }), " 훅에 대해 알아볼게요."] }), "\n", _jsx(_components.h2, { children: "useForm" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useForm()" }), "은 커스텀 훅으로 입력받은 인수로 하나의 객체를 반환 받아 유효성 검사와 관련된 다양한 기능을 사용해게 해줘요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useForm } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-hook-form\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "formState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "watch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "handleSubmit" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "getValues" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] })] }) }) }), "\n", _jsx(_components.p, { children: "자주 사용되는 반환값을 하나씩 살펴볼게요." }), "\n", _jsx(_components.h3, { children: "1. register" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "register" }), "는 ", _jsx(_components.code, { children: "input" }), "이나 ", _jsx(_components.code, { children: "select" }), "와 같은 필드를 키-값 쌍의 객체 형태로 저장해요.", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "React Hook Form" }), "은 HTML의 폼 validation을 기반으로 하기 때문에 다음과 같은 유효성 룰을 사용할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// {name: value} 형태로 저장" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}" })] })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "required" }), " : 필수 여부를 지정해요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// required" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 폼을 제출하기 위한 필수조건으로 설정" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {required: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "})}" })] })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "min" }), ", ", _jsx(_components.code, { children: "max" }), " : 숫자 형태의 최소, 최대값을 지정해요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// min, max" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 숫자의 최소 값을 설정" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"age\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"min: 19\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "})}" })] })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "minLength" }), ", ", _jsx(_components.code, { children: "maxLength" }), " : 문자 형태의 최소, 최대 길이를 지정해요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/// minLength, maxLength" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 문자의 최소 길이 설정" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {minLength: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "})}" })] })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "pattern" }), " : 입력 데이터가 지켜야하는 정규표현식을 지정해요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/// pattern" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 정규표현식 설정" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"email\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " pattern: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " value:" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " /" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "^" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "[" }), _jsx(_components.span, { style: { color: "#85E89D", fontWeight: "bold" }, children: "\\w" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "-.]" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#DBEDFF" }, children: "@(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "[\\w-]" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#85E89D", fontWeight: "bold" }, children: "\\." }), _jsx(_components.span, { style: { color: "#DBEDFF" }, children: ")" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "[\\w-]" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "{2,4}$" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "/" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " message: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"유효하지 않은 이메일 형식입니다.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "validate" }), " : 기본 옵션으로는 커버되지 않는 유효성 검사를 지정해요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/// validate" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 복잡한 조건 설정" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userName\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " validate: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // value가 조건을 통과하지 못할 경우 메세지 출력" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " noSpecialChars" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "value" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " /" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "^" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "[a-zA-Z0-9]" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "*$" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "/" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "test" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(value) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "||" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"특수문자는 사용할 수 없어요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 비동기 검사" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userName\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " //비동기 함수" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " validate" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "async" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "value" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // value가 조건을 통과하지 못할 경우 메세지 출력" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " isAvaliable" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " checkEmailDuplicattion" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(value);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " isAvaliable " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "||" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"이미 등록된 이메일 이에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "register" }), " 메소드의 더 많은 기능은 ", _jsx(_components.a, { href: "https://www.react-hook-form.com/api/useform/register/", children: _jsx(_components.strong, { children: "공식문서에서" }) }), " 확인할 수 있어요."] }), "\n", _jsx(_components.h3, { children: "2. setValue" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "setValue" }), "를 통해 등록된 필드의 값을 등록하면 ", _jsx(_components.strong, { children: "유효성 검사를 통해 불필요한 리렌더링을 방지" }), "할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useForm } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-hook-form\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " MyForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // name 필드의 기본값을 \"\" 로 설정했어요." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " defaultValues: { name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // name 필드의 값을 \"rrr\" 로 설정해요." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 이렇게 변경된 필드는 dirty(수정된) 상태로 변경돼요." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"rrr\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // shoudDirty 를 true로 설정하면 해당 필드를 강제로 dirty 상태로 설정해요." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"rrr\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", { shouldDirty: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // shouldValidate를 세번째 인자로 추가하면 유효성 검사 후 변경해요." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"rrr\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", { shouldValidate: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"button\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleClick}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " save" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "3. formState" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "formState" }), "는 ", _jsx(_components.code, { children: "form" }), " ", _jsx(_components.strong, { children: "상태에 대한 정보를 관리" }), "하는데에 사용돼요."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "isDirty" }), " : 기본값과 비교해 하나라도 수정된 경우 ", _jsx(_components.code, { children: "true" }), "로 설정돼요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " formState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isDirty" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "dirtyFields" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ defaultValues: { id: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } });" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// isDirty: true" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 기본값 \"\" 에서 \"rrr\"로 변경 되었기 때문" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"rrr\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// isDirty: false" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 기본값과 같기 때문" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "dirtyFields" }), " : 기본값을 제공된 필드와 비교해 사용자가 수정한 필드만 담은 객체에요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " formState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isDirty" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "dirtyFields" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ defaultValues: { id: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } });" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"rrr\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", { shouldDirty: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(dirtyFields);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// { name: true }" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "isValid" }), " : ", _jsx(_components.code, { children: "form" }), "이 가지는 전체 필드의 유효성 검사가 통과된 경우 ", _jsx(_components.code, { children: "true" }), "로 설정돼요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " formState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isValid" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// onChange 모드로 change 마다 isValid 상태를 업데이트해요." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ mode: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"onChange\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "form" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"submit\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{isValid " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"activeLogin\"" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"disabledLogin\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " 로그인" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "errors" }), " : 유효성 검사에 실패한 필드의 에러 메시지를 담고 있는 객체로 각 필드의 ", _jsx(_components.code, { children: "name" }), " 값으로 접근 가능해요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " formState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isValid" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "errors" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ mode: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"onChange\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "form" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{errors[" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]?.message}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{errors[" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]?.message}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"submit\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{isValid " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"activeLogin\"" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"disabledLogin\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " 로그인" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "3. watch" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "watch()" }), " 메서드는 지정된 필드의 값을 ", _jsx(_components.strong, { children: "실시간으로 추적" }), "할 수 있어요.", _jsx(_components.br, {}), "\n", "입력값의 변경을 감지해서 동적으로 UI나 유효성 검사를 처리할 때 유용해요."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "watch()" }), " : 인자가 없으면 전체 필드의 현재 값을 반환해요."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "watch(\"id\")" }), " : 특정 필드의 값을 실시간으로 추적해요."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "watch(\"id\", \"기본값\")" }), " : 두 번째 인자는 폼이 아직 마운트되기 전에 보여줄 값으로 ", _jsx(_components.code, { children: "fallback" }), " 역할을 수행해요."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "watch([\"id\", \"password\"])" }), " : 배열 형태로 여러 필드를 동시에 감시할 수 있어요."] }), "\n"] }), "\n", _jsx(_components.p, { children: "실제로는 이렇게 사용할 수 있어요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "watch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " defaultValues: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " password: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " confirmPassword: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "form" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"confirmPassword\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " validate" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "value" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 입력한 비밀번호 확인 값이 감시 중인 password 필드의 값과 다르면 에러 메시지 반환" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " value " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " watch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "||" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"비밀번호가 일치하지 않아요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "4. getValues" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "watch()" }), "는 값이 바뀔 때마다 컴포넌트를 리렌더링시켜 실시간으로 감시하지만, ", _jsx(_components.code, { children: "getValues()" }), "는 ", _jsx(_components.strong, { children: "호출 시점" }), "에만 값을 가져와 리렌더링과는 무관하게 동작해요."] }), "\n", _jsxs(_components.p, { children: ["비밀번호 확인 시 입력값에 따라 UI를 실시간으로 업데이트해 피드백하는 경우엔 ", _jsx(_components.code, { children: "watch()" }), "를,", _jsx(_components.br, {}), "\n", "유효성 검사와 무관하게 현재 값을 가져와야 하는 경우에는 ", _jsx(_components.code, { children: "getValues()" }), "를 사용하면 좋아요."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getValues()" }), " : 모든 필드의 값을 가져와요. ", _jsx(_components.code, { children: "return: object" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getValues(\"name\")" }), " : 인자로 전달한 필드의 값만 가져와요. ", _jsx(_components.code, { children: "return: string" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getValues([\"name\", \"id\"])" }), " : 배열에 담은 필드들의 값을 가져와요. ", _jsx(_components.code, { children: "return: string[]" })] }), "\n"] }), "\n", _jsx("p", {}), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "getValues" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "());" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // {name: \"reerae\", id : \"rrr\"}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "getValues" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "));" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // \"reerae\"" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "getValues" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]));" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " //[\"reerae\", \"rrr\"]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "form" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"name\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} /> {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* reerae 입력 */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")} /> {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* rrr 입력 */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"button\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleClick}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " click" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx(_components.h3, { children: "5. handleSubmit" }), "\n", _jsxs(_components.p, { children: ["폼 제출시 실행하는 함수로 ", _jsx(_components.strong, { children: "유효성 검사를 수행" }), "하고 인자에 넣은 콜백 함수를 실행해요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "handleSubmit()" }), "은 두개의 인자를 받을 수 있어요.", _jsx(_components.br, {}), "\n", "첫번째 인자는 유효성 검사에 통과했을 때 호출되는 콜백함수, 두번째 인자는 실패했을때 호출되는 콜백함수에요."] }), "\n", _jsxs(_components.p, { children: ["유효성 검사가 통과되어 호출되는 콜백함수는 각 필드의 입력값을 담은 ", _jsx(_components.code, { children: "data" }), " 객체를 전달받게 돼요.", _jsx(_components.br, {}), "\n", "만약 유효성 검사가 실패 될 경우에는 실패된 필드의 에러 메세지로 담은 ", _jsx(_components.code, { children: "errors" }), " 객체를 전달받아요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " handleSubmit" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " setFocus" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " formState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "errors" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "data" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 유효성 검사 통과" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 등록 API 호출" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " useRegister" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(data);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onError" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "errors" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 유효성 검사 실패" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 첫번째 에러 필드에 focus" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " firstErrorField" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Object." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "keys" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(errors)[" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "];" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (firstErrorField) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setFocus" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(firstErrorField);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "form" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "handleSubmit" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(onSubmit, onError)}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"id\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", { required: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", { required: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"submit\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">제출" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 이러한 메소드들을 통해서 UX를 고려한 ", _jsx(_components.code, { children: "form" }), " 로직을 구현할 수 있게 됐어요.", _jsx(_components.br, {}), "\n", "지금까지 알아본 기능들을 이용해 동작하는 회원가입 ", _jsx(_components.code, { children: "form" }), "을 한 번 만들어 볼게요."] }), "\n", _jsx(MDXImage, { src: "posts/react-hook-form/form.png", width: "300px", alt: "회원가입 form UI", caption: "회원가입 form UI" }), "\n", _jsxs(_components.p, { children: ["먼저 아이디와 비밀번호 필드는 ", _jsx(_components.code, { children: "register" }), "를 이용한 필수입력과 유효성 검사를 추가했고\n", _jsx(_components.code, { children: "errors" }), " 메소드를 통해 에러 메세지를 표시할 수 있도록 했어요."] }), "\n", _jsx(_components.p, { children: "아이디 입력 필드:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "InputWithClear" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"text\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디 입력\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " errorMessage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{errors.userId?.message " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "as" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " required: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디를 입력해 주세요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " minLength: { value: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "5" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", message: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디는 5자 이상이에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) })] }) }) }), "\n", _jsx(_components.p, { children: "비밀번호, 비밀번호 확인 입력 필드:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "InputWithClear" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호 입력\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " errorMessage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{errors.password?.message " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "as" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " validate: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " required" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "value" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " value." }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "length" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " >=" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 8" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ||" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"비밀번호는 8자 이상이에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "InputWithClear" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호 확인\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호 확인\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " errorMessage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{errors.passwordCheck?.message " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "as" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"passwordCheck\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " required: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호를 입력해 주세요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " minLength: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " value: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "8" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " message: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호는 8자 이상이에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이러한 입력 필드에 대한 유효성 검사를 ", _jsx(_components.code, { children: "useForm({ mode: \"onChange\" })" }), "를 통해 검사하도록 설정했어요."] }), "\n", _jsx(MDXImage, { src: "posts/react-hook-form/required.png", width: "300px", alt: "필수 입력 필드와 에러 메세지", caption: "필수 입력 필드와 에러 메세지" }), "\n", _jsxs(_components.p, { children: ["그리고 비밀번호 확인 필드에는 ", _jsx(_components.code, { children: "validate" }), " 속성을 추가해 ", _jsx(_components.code, { children: "watch(\"password\")" }), " 메서드로 비밀번호 필드의 입력값을 감지해 에러 메세지를 표출하도록 구현했어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "InputWithClear" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호 확인\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호 확인\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " errorMessage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{errors.passwordCheck?.message " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "as" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"passwordCheck\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " required: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호를 입력해 주세요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " minLength: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " value: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "8" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " message: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"비밀번호는 8자 이상이에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // validate 속성 추가" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " validate: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " required" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "value" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " value " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " watch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"password\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "||" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"비밀번호가 일치하지 않아요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "/>" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "posts/react-hook-form/watch.png", width: "300px", alt: "watch를 통합 입력필드 감지", caption: "watch를 통합 입력필드 감지" }), "\n", _jsxs(_components.p, { children: ["그리고 ", _jsx(_components.code, { children: "useState" }), "와 같은 ", _jsx(_components.code, { children: "react" }), " 훅과 연결해 비밀번호 중복확인하는 api와 연동할 수 있도록 구현했으며,", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "trigger" }), "를 통해 검증한 아이디가 변경되었을때 다시 검증할 수 있도록 구현했어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isIdChecked" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setIsIdChecked" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleIdCheck" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " userId" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " getValues" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (userId." }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "length" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 5" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (userId " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"reerae\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setIsIdChecked" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setError" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", { message: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"이미 사용 중인 아이디에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setFocus" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "else" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setIsIdChecked" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "true" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " clearErrors" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " trigger" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex items-end w-full gap-xxs\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "InputWithClear" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " label" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"text\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디 입력\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " errorMessage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{errors.userId?.message " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "as" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "register" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"userId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " required: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디를 입력해 주세요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " minLength: { value: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "5" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", message: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"아이디는 5자 이상이에요.\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Button" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"p-3 mb-8 font-medium text-body2\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " variant" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"primaryOutline\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"button\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleIdCheck" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "()}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " disabled" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{isIdChecked}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " 중복확인" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "posts/react-hook-form/useState.png", width: "300px", alt: "useState를 통한 아이디 중복 검사 API 호출 및 메세지 표출", caption: "useState를 통한 아이디 중복 검사 API 호출 및 메세지 표출" }), "\n", _jsxs(_components.p, { children: ["이렇게 모든 ", _jsx(_components.code, { children: "validation" }), ", 유효성 검사를 통과하게 되면 ", _jsx(_components.code, { children: "register" }), "의 ", _jsx(_components.code, { children: "isValid" }), " 속성이 ", _jsx(_components.code, { children: "true" }), "값을 가지게 되고,\n", _jsx(_components.code, { children: "Button" }), " 컴포넌트의 ", _jsx(_components.code, { children: "disabled={!isValid}" }), " 속성을 통해 회원가입 요청을 허용할 수 있도록 구현했어요."] }), "\n", _jsx(MDXImage, { src: "posts/react-hook-form/trigger.png", width: "300px", alt: "모든 유효성 검사를 통과한 form", caption: "모든 유효성 검사를 통과한 form" }), "\n", _jsx(_components.h2, { children: "닫는 글" }), "\n", _jsxs(_components.p, { children: ["이렇게 ", _jsx(_components.code, { children: "React hook Form" }), "의 여러 API 및 속성에 대해 알아보고 구현까지 해봤는데 사용하지 못한 여러 기능들이 많이 있었어요."] }), "\n", _jsxs(_components.p, { children: ["회원가입 같은 단순한 ", _jsx(_components.code, { children: "form" }), " 외에도 다방면으로 활용할 수 있을거라고 생각되네요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "React Hook Form" }), "과 같은 ", _jsx(_components.code, { children: "form" }), " 관련 라이브러리는 많이 있으니 어떤 방식으로 사용하는지의 큰 흐름을 이해하고 있으면 입력 폼이 필요한 다양한 페이지에서 쉽게 확장할 수 있어요."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

React Hook Form으로 폼 구현하기