form - input

input의 초기값을 비어있게 만드려면 useState를 이용한다.

const [nickname, setNickname] = useState("")
const [password, setPassword] = useState("")

이렇게 설정을 했는데 input이 많아지면 일일히 다 적어줄거냐...
그러면 너무 복잡해지고 코드가 더러워진다.

그래서 우리는 이것을 객체 형식으로 만들어줄 수 있다.

const [userInputs, setUserInputs] = useState({
        nickname : "",
        password : "",
})

지금은 2개밖에 없기에 별 차이가 없는 것 같아 보이지만 더 많아지고 복잡해지면 확실히 차이를 느낄 것이다.

return (
    <form onSubmit={ handleSubmit }>
        <label>닉네임 :</label>

        <input 
        	type="text" 
            name='nickname' 
            onChange={handleChange} 
            value={userInputs.nickname} 
         />

        <label>패스워드 :</label>

        <input 
        	type="password" 
            name='password' 
            onChange={handleChange} 
            value={userInputs.password} 
         />

        <input type="submit" value="제출" />
    </form>
);

리액트에서 input태그를 작성할 때에는
name 속성으로 각각을 구부할 수 있도록 하고,
value 속성을 통해 값을 부여해준다.
하지만 여기까지 작성하면 타이핑을 해도 업데이트 되지 않는다.
onChange이벤트로 값이 바뀔 때마다 업데이트를 가능하게 해준다.

여기에는 작성되어 있지 않지만, onChange에서 e.preventDefault로 페이지가 매번 리로딩되는 것을 방지한다.