Register 페이지 질문이요

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

작성

398

const onSubmit = ({email, password, name}) => {
    const body = {
      email,
      password,
      name,
      image : `https://via.placeholder.com/600x400?text=no+user+image`
    };

생략

<form className="mt-6" onSubmit={handleSubmit(onSubmit)}>
          <div className="mb-2">
            <label
              htmlFor="email"
              className="text-sm font-semibold text-gray-800"
            >Email</label>
            <input
              type="email"
              id="email"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
              {...register("email", userEmail)}
            />
            {
            errors?.email &&
            <div>
              <span className="text-red-500">
                {errors.email.message}
              </span>
            </div>
          }
          </div>

          <div className="mb-2">
            <label
              htmlFor="name"
              className="text-sm font-semibold text-gray-800"
            >Name</label>
            <input
              type="text"
              id="name"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
              {...register("name", userName)}
            />
            {
            errors?.name &&
            <div>
              <span className="text-red-500">
                {errors.name.message}
              </span>
            </div>
          }
          </div>

          <div className="mb-2">
            <label
              htmlFor="password"
              className="text-sm font-semibold text-gray-800"
            >Password</label>
            <input
              type="password"
              id="password"
              className="w-full px-4 py-2 mt-2 bg-white border rounded-md"
              {...register("password", userPassword)}
            />
            {
            errors?.password &&
            <div>
              <span className="text-red-500">
                {errors.password.message}
              </span>
            </div>
          }
          </div>
          <div className="mt-6">
            <button type="submit" className="w-full bg-black text-white px-4 py-2 rounded-md hover:bg-gray-700 duration-200">
              회원가입
            </button>
          </div>
          <p className="mt-8 text-xs font-light text-center text-gray-700">
          아이디가 있다면? {" "}
          <a
          href="/login"
          className="font-medium hover:underline"
          >
            로그인
          </a>
          </p>
        </form>

여기서 onSubmit 함수안에 있는 Body 에 email name password는 어떻게 가져오는건가요?

htmlFor 로 알고 가져오는건가요?

이부분이 좀 헷갈려서요

가져와서 Thunk로 넘어가는건 알겠는데

저 함수에서 어떻게 body로 담는지를 모르겠어요 ㅠ

react redux node.js 웹앱 mongodb

답변 2

John Ahn

지식공유자

안녕하세요 DV.ROY님 !

이 부분은 현재 React-Hook-Form을 이용하고 있는데

이것을 이용할 때 input에 register를 해줬는데

<input type="password" id="password" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("password", userPassword)} />

register 등록을 해준 것들의 모든 value가

onSubmit에서 가져올수있게 됩니다

라이브러리에서 그러한 방식으로 만들어 놓았습니다 ^^

화이팅입니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

Register 페이지에서 onSubmit 함수에 있는 body 객체는 email, name, password 값을 handleSubmit에서 호출되는 시점에 react-hook-form을 통해 폼에서 입력된 데이터를 전달받아서 구성됩니다.

handleSubmit 함수는 react-hook-form 라이브러리의 훅 중 하나로, 폼 제출 시 이 함수를 통해 데이터를 받고, 그 데이터를 onSubmit 함수의 매개변수로 넘겨줍니다. email, name, password 필드는 각각 input 태그의 id와 ...register 속성을 통해 연결되어 있으며, 이를 통해 onSubmit 함수에서 각각의 값을 사용할 수 있습니다.

htmlFor 속성은 label 태그가 어떤 input 태그와 연결되는지를 명시하는 HTML 속성으로, 직접적으로 데이터를 가져오지는 않습니다. 대신, label을 클릭하면 자동으로 해당 input에 포커스가 맞춰지는 접근성을 향상시키는 역할을 합니다.

따라서, onSubmit 함수에서 body로 데이터를 담는 과정은 htmlFor와는 관련이 없고, react-hook-form에서 제공하는 register 함수와 handleSubmit을 통해 데이터를 연결하고 처리하는 방식입니다.

사용자가 폼에 데이터를 입력하고 ‘회원가입’ 버튼을 누르면, handleSubmit(onSubmit)이 호출되어 onSubmit 함수로 입력된 데이터가 email, name, password 등의 키 값을 가진 객체 형태로 전달되고, 이를 body 객체에 할당하여 서버로 전송하거나 다른 로직을 수행할 수 있습니다.

인프런 커뮤니티 질문&답변

Register 페이지 질문이요