목차

• postUpload 전체 코드

게시글 업데이트 부분이다.하나하나 분해하면서 전체적인 구조를 이해해보자.

<Form>
 <MainFieldSet>

	<PostForm>
		<textarea/>
	</PostForm>

<PostFormContainer>
	<UploadImgIcon>
		<input/>
	</UploadImgIcon>
</PostFormContainer>

 <MainFieldSet/>
</Form>

Form container안에 Wrapper 역할을 하는 PostForm PostFormContainer 컴포넌트가 있다. 그리고 textarea태그와 input태그를 통해서 게시글을 올릴 수 있다.

React-Hook-Form

const {
    register,
    handleSubmit,
    formState: { isValid },
  } = useForm({
    mode: "onChange",
  });

우리 프로젝트에서는 ReactHook Form을 사용한다. handleSubmit 함수를 통해 전달하며, register를 통해서 입력된 state값들을 관리한다. 그 외의 설정은 V7를 좀 더 공부해야 할 부분이다. V6를 먼저 공부한다음에 이후에 V7를 적응하면 더 잘 활용할 수 있을거라고 생각한다.formState: { isValid } 코드를 통해서는 우리가 입력한 값이 유효한가에 대한 상태값을 알려준다. 해당값에 따라서 우리는 유저가 입력된 값을 서버에 보낼지 말지 제어할 수 있을거라고 예상한다

useForm

컨텐츠 입력 값 Create

	<PostForm
		{...register("postText", { required: true })}
		htmlFor="postText"
	>
		<textarea
			type="text"
			name="postText"
			id="postText"
			placeholder={"게시글 입력하기..."}
			...
	/>

postForm의 htmlFor=”postText”와 id=”postText”로 인하여 둘은 서로 연관된 관계를 갖게된다. 이벤트가 발생하는 지점을 공유한다고 보면 될 것 같다. textarea에 값을 입력하면 htmlFor 속성으로 인하여 react-hook-form에 값을 전달할 수 있게 된다.

입력된 컨텐츠는 어디에 저장 될까?

<Form onSubmit={handleSubmit(onSubmit)}>
</Form>

이곳의 UI부분 전체를 감싸고 있는 태그는 Form 태그이다. Form태그에는 onSubmit 이벤트가 걸려있다. onsubmit으로 발생한 이벤트는 제출 이벤트 handleSubmit (우리가 입력한 값들을 보내는)으로 인하여 인수로 전달이 된다.

React로 양식(form) UI 구현하기

OnSubmit 함수