예제로 연습

기본적인 회원가입 형태의 예제

• Register.jsx (변경 전)

변수마다 개별적으로 state를 생성하고, onChange 함수를 작성했다.

input태그의 값을 전달받기 위해서는 매개변수를 name이라고 할 때, name.target.value의 형태로 받아올 수 있다.

import { useState } from "react";

const Register = () => {
    const [name, setName] = useState("");
    const [birth, setBirth] = useState("");
    const [country, setCountry] = useState("");
    const [phoneNumber, setPhoneNumber] = useState("");

    const onChangeName = (name) => {
        setName(name.target.value)
    }
    const onChangeBirth = (birth) => {
        setBirth(birth.target.value)
    }
    const onChangeCountry = (country) => {
        setCountry(country.target.value)
    }
    const onChangePhoneNumber = (phoneNumber) => {
        setPhoneNumber(phoneNumber.target.value)
    }

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

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

            <select
                value={country}
                onChange={onChangeCountry}
            >
                <option></option>
                <option>대한민국</option>
                <option>일본</option>
                <option>중국</option>
            </select>
            <p>{country}</p>

            <input 
                value={phoneNumber}
                placeholder="'-'을 입력하세요"
                onChange={onChangePhoneNumber}
            />
            <p>{phoneNumber}</p>
        </div>
    )
}

export default Register;

• Register.jsx (변경 후)

이전 코드는 비슷한 형태를 갖는 코드들이 개별적으로 존재했다. 비슷한 형태의 코드들을 합쳐보겠다.

input이라는 객체 배열 형태의 state 변수를 선언한다. onChange 함수는 spread 연산자 ...을 사용하여 ipnut 배열을 나열하고, 밑에 input태그에서 사용한 name 속성을 통해 해당하는 객체에 데이터를 저장할 수 있다.

import { useState } from "react";

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

    const onChangeInput = (input) => {
        setInput({
            ...input,
            [input.target.name] : input.target.value
        })
    }


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

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

            <select
                name="country"
                value={input.country}
                onChange={onChangeInput}
            >
                <option></option>
                <option>대한민국</option>
                <option>일본</option>
                <option>중국</option>
            </select>
            <p>{input.country}</p>

            <input 
                name="phoneNumber"
                value={input.phoneNumber}
                placeholder="'-'을 입력하세요"
                onChange={onChangeInput}
            />
            <p>{input.phoneNumber}</p>
        </div>
    )
}

export default Register;

• App.jsx

import { useState } from 'react'
import Register from "./components/Register"

function App() {

  return (
    <div>
      <Register />
    </div>
  )
}

export default App;