ContextAPI를 이용하여 Sub.js에서 사용한 값을 App.js 에서도 감지가 가능하다
React Hook Form: FormProvider-useFormContext
import{useState}from"react";import{useForm}from"react-hook-form";importHeaderfrom"./Header";importSubfrom"./Sub";import"./styles.css";import{useOrderFormContext}from"./FormProviders";exportdefaultfunctionApp(){const{register,handleSubmit,watch,formState:{errors},} = useOrderFormContext();const[data,setData] = useState("");// 등록된 `이름`을 전달하여 입력값을 확인// console.log(watch("firstName"));// console.log(errors);return(<div>{/* `handleSubmit` 은 onSubmit을 호출하기 전에 입력을 검증 */}
<formonSubmit={handleSubmit((data)=>setData(JSON.stringify(data)))}><Header/>{/**
* @description Register fields
* - `register`함수를 호출하여 입력필드를 훅에 등록하여 값을 관리할 수 있다
* - 이후에는 이 값으로 유효성 검사, 제출 등의 작업을 할 수 있다
*/}
<labelhtmlFor="firstName">[App.js] First Name</label><input{...register("firstName")}id="firstName"placeholder="First name"/><labelhtmlFor="lastName">[App.js] Last Name</label>{errors.lastName && <span>알파벳만 입력해 주세요</span>}<input{...register("lastName",{pattern:/^[A-Za-z]+$/i})}id="lastName"placeholder="Last name (알파벳만 입력해 주세요)"/><labelhtmlFor="category">[App.js] category</label><selectid="category"{...register("category")}><optionvalue="">Select...</option><optionvalue="A">Option A</option><optionvalue="B">Option B</option></select>{/**
* @description Apply validation
* - HTML 표준 유효성 검사를 수행하도록 되어있다
* - required: 필수값 여부
* - min
* - max
* - minLength
* - maxLength
* - pattern
* - validate
*/}
<labelhtmlFor="aboutYou">[App.js] aboutYou</label>{/* `error` 객체를 사용하여 필듸 유효성 검사에 실패한 경우 오류 메시지를 표시할 수 있다 */}
{errors.aboutYou && (<span>값을 입력해 주세요 (최소5자, 최대 20자)</span>)}<textareaid="aboutYou"{...register("aboutYou",{required:true,minLength:5,maxLength:20,})}placeholder="About you (최소5자, 최대 20자)"/><Sub/><p>{data}</p><inputtype="submit"/></form></div>);}