form - input changes

리액트에서 form이 있을 때 input changes를 어떻게 해주는지를
배웠다 아래 코드를 살펴보자

import React from "react"

export default function Form() {
    const [firstName, setFirstName] = React.useState("")
    
    console.log(firstName)
    
    function handleChange(event) {
        setFirstName(event.target.value)
    }
    
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
            />
        </form>
    )
}

여기서 Challenge: update the firstName state on every keystroke 라는 챌린지가 있었는데... 혼자 했을 때 prevState=>event.target.value 이렇게 썼었다 근데 이건
예전 벨류를 변화시키고 그런게 아니라 그냥 새로 뭔가를 치면
그 벨류를 가져오는거니까 prevState안써도 되고
그냥 setFirstName(event.target.value) 이렇게 쓰면 되는거였다.

아 그리고 그 전에 form에 이렇게 onChange={handleChange} 써주고
function handleChange(event) 이 부분에 이렇게 event써줘야 함!
event.target.value는 event object 찾아보면 이렇게 설정해서
value를 알 수 있는거임..

이 다음에는 lastName도 체크하는 첼린지를 해봤는데
일단 내가 생각한데로 아래와 같이 하면 작동 되기는 된다.

import React from "react"

export default function Form() {
    const [firstName, setFirstName] = React.useState("")
    const [lastName, setLastName] = React.useState("")
    /**
     * Challenge: Track the applicant's last name as well
     */
    
    console.log(firstName, lastName)
    
    function handleFirstNameChange(event) {
        setFirstName(event.target.value)
    }
    
    function handleLastNameChange(event) {
        setLastName(event.target.value)
    }
    
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleFirstNameChange}
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleLastNameChange}
            />
        </form>
    )
}

근데 위의 코드는 ideal하지 않음..만약 form이 100000개 있다고 하면
이렇게 duplicate하는데에도 한계가 있기 때문에 다른 방법이 있다.
그 방법은 object state를 이용해주는건데
아래와 같다.

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {firstName: "", lastName: ""}
    )
    
    console.log(formData)
    
    function handleChange(event) {
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [event.target.name]: event.target.value
            }
        })
    }
    
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
                name="firstName"
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleChange}
                name="lastName"
            />
        </form>
    )
}

const [formData, setFormData] = React.useState(
{firstName: "", lastName: ""}
)

이 코드에서 볼 수 있듯이 state를 firstName, lastName으로 따로
나누는게 아니라 저렇게 한번에 묶어서 formData로 써주고
useState에 firstName lastName 기본을 empty string으로 해주는거.

  function handleChange(event) {
       setFormData(prevFormData => {
           return {
               ...prevFormData,
               [event.target.name]: event.target.value
           }
       })
   }

그리고 기본 state값이 지금 2개이니까이번에는
previous Data를 사용해주어야 한다고 한다.
사실 이 부분이 잘 이해는 안가서 강의 다시 한번 보고
업데이트 해야겠음..
암튼 return해주는값은 일단 예전 값을 쭉 spread operator로
나열해준뒤 event.target.name부분을 event.target.value로 잡아줌..
흠... 여기를 왜 이렇게 잡아주는건지도 사실 아직 100%는 이해가 안갔음.