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

State로 사용자 입력 관리하기 1

App.jsx

import { useState } from "react";

//간단한 회원가입 폼
//1. 이름
//2. 생년월일
//3. 국적
//4. 자기소개
const Register = () => {
    const [name, setName] = useState("이름");
    const [birth, setBirth] = useState("");
    const [country, setCountry] = useState("");
    const [bio, setBio] = useState("");

    const onChangeName = (e) => {
        setName(e.target.value);
    }
    const onChangeBirth = (e) => {
        setBirth(e.target.value);
    }
    const onChangeCountry = (e) => {
        setCountry(e.target.value);
    }
    const onChangeBio = (e) => {
        setBio(e.target.value);
    }


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

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

          <div>
            <select value={country} onChange={onChangeCountry}>
              <option ></option>
              <option value="kr">한국</option>
              <option>미국</option>
              <option>일본</option>
            </select>
            {country}
          </div>

          <div>
            <textarea value={bio} onChange={onChangeBio}/>
          </div>
        </div>
    );
}

export default Register;

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

위 내용의 1버전을 리펙토링 할 수 있다. 중복된 코드를 제거해보자.

import { useState } from "react";

//간단한 회원가입 폼
//1. 이름
//2. 생년월일
//3. 국적
//4. 자기소개
const Register = () => {
    const [input, setInput] = useState({
      name : "",
      birth : "",
      country : "",
      bio : ""
    });

    const onChange = () => {
        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 ></option>
              <option value="kr">한국</option>
              <option>미국</option>
              <option>일본</option>
            </select>
          </div>

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

export default Register;

const onChange = () => {
        setInput({
          ...input,
          [e.target.name]: e.target.value,
        })
}
...
...
<div>
    <textarea 
      name="bio"
      value={input.bio}
      onChange={onChange}/>
</div>

위에 코드에서 [e.target.name] 의미는 onChange가 적용되는 태그의 name값을 가져와서 적용하는 것이다. 고로 아래의 의마와 같다.

const onChange = () => {
        setInput({
          ...input,
          bio: e.target.value,
        })
}

그래서 여러개의 비슷한 핸들러들을 간결한 하나의 통합된 핸들러로 사용할 수 있다.