controlled inputs, textarea, checkbox

흠..controlled inputs이라는거에 대해 배웠는데
사실 들었는데 잘 이해가 안간다 ㅠㅠ 그냥 form만들때
react에서 제어 할 수 있도록 이렇게 value를 적어주는것이다
밑의 코드를 살펴보자

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {firstName: "", lastName: "", email: ""}
    )
    
    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"
                value={formData.firstName}
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleChange}
                name="lastName"
                value={formData.lastName}
            />
            <input
                type="email"
                placeholder="Email"
                onChange={handleChange}
                name="email"
                value={formData.email}
            />
        </form>
    )
}

저기 위해 보이는것처럼 value써주는게 controlled inputs이라고 한다.

textarea를 react에서 쓸때도 똑같은 방식으로 value 적어주면 된다.

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {firstName: "", lastName: "", email: "", comments: ""}
    )
    
    console.log(formData.comments)
    
    function handleChange(event) {
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [event.target.name]: event.target.value
            }
        })
    }
    
    /**
     * Challenge: Add a textarea for "comments" to the form
     * Make sure to update state when it changes.
     */
    
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
                name="firstName"
                value={formData.firstName}
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleChange}
                name="lastName"
                value={formData.lastName}
            />
            <input
                type="email"
                placeholder="Email"
                onChange={handleChange}
                name="email"
                value={formData.email}
            />
            <textarea 
                value={formData.comments}
                placeholder="Comments"
                onChange={handleChange}
                name="comments"
            />
        </form>
    )
}

리액트에서의 textarea가 특이한 점은 html에서는
닫아주는 textarea도 따로 써주는데 여기서는 그냥
한번만 써주고 /로 닫아준다는게 다른점이다.....

다음으로 check박스에 대해 알아보자

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {
            firstName: "", 
            lastName: "", 
            email: "", 
            comments: "", 
            isFriendly: true
        }
    )
    
    function handleChange(event) {
        const {name, value, type, checked} = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }
    
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
                name="firstName"
                value={formData.firstName}
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleChange}
                name="lastName"
                value={formData.lastName}
            />
            <input
                type="email"
                placeholder="Email"
                onChange={handleChange}
                name="email"
                value={formData.email}
            />
            <textarea 
                value={formData.comments}
                placeholder="Comments"
                onChange={handleChange}
                name="comments"
            />
            <input 
                type="checkbox" 
                id="isFriendly" 
                checked={formData.isFriendly}
                onChange={handleChange}
                name="isFriendly"
            />
            <label htmlFor="isFriendly">Are you friendly?</label>
            <br />
        </form>
    )
}

리액트에서는 checkbox를 input으로 해서 type을 checkbox로 만들어준다. 다른 애들과 다르게 value는 안써주고 string이 아니라 boolean type이기 때문에 true라고 적어준다. 이렇게

isFriendly: true

그리고 이 부분은

   function handleChange(event) {
        const {name, value, type, checked} = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }

원래 이렇게 생겼던 코드에서 event.target을 destructuring 해준것이다. type은 type을 확인해서 checkbox인지 알아야 하니까 쓴거임.
그리고 checked은 유저가 박스를 check했는지 안했는지 알아야 하니까.

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

솔직히 잘 이해가 안가는데 ㅠㅠ 일단 name, value, type, checked 이렇게 destrucring 해준거... 그리고 타입이 체크박스인지 알 수 있도록 type을 넣어주었고 유저가 체크했는지 안했는지를 알 수 있도록 checked도 넣어준다.