[React] State로 사용자 입력 관리하기2

AReum·2024년 10월 19일

JavaScript React

React

목록 보기

10/53

회원가입 폼 코드 리팩토링하기

만들었던 회원가입 폼에 중복 코드가 많다.

→ 객체 형태로 변경하고자 한다.

리팩토링1 - 객체를 생성해서 리팩토링하기

useState 초기 값을 객체로 설정한다.

리팩토링2 - 이벤트 핸들러 통합하기, 통합 이벤트 핸들러 만들기

input에 이벤트 핸들러를 사용해서 onChange 함수가 실행 된다.
setInput 상태 변화 함수를 호출 → 인수로 객체를 생성해서 전달한다.
스프레드 연산자를 사용해서 기존의 input의 값을 나열해준다.
프로퍼티의 키를 명시하는 자리에 [변수명]을 입력하면 프로퍼티의 키로 설정된다.
e.target.name이 프로퍼티의 키로 설정된 것이다.

코드 개선한 목록

하나의 객체 값으로 통합
이벤트 핸들러 통합
- 프로퍼티 키 자리에 [변수명] → 프로퍼티의 키로 설정된다.
- [e.target.name]: 각 input 태그에 name 속성 → name 값이 설정

Register 컴포넌트(리팩토링)

import { useState } from "react";

// 간단한 회원가입 폼
// 이름, 생년월일, 국적, 자기소개

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: "",
  });

  const onChange = (e) => {
    console.log(e.target.name, e.target.value);
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div>
      <div>
        <input
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={"이름"}
        />
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>

      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option value=""></option>
          <option value="kr">한국</option>
          <option value="uk">영국</option>
          <option value="us">미국</option>
        </select>
      </div>

      <div>
        <textarea name="bio" value={input.bio} onChange={onChange} />
      </div>
    </div>
  );
};

export default Register;