[React] input 안에 value 써야하는 이유 + value 사용시 입력안되는 문제

import React, { useState, useMemo, useCallback } from 'react'

const Memo = () => {
    const [username, setUsername] = useState('')   //React 가 빠진 이유는 위에 import 때문
    const [list, setList] = useState([])
    
    const change = (e) => {
        let { value } = { ...e.target }
        setUsername(value)
    }
    
    const submit = (e) => {
        e.preventDefault()
        const newList = [...list]
        newList.push(username)
        setList(newList)
        setUsername('')
    }
    
   ...

    return (
        <>
            <form onSubmit={submit}>
                <input
                    type="text"
                    name="username"
                    value={username}
                    onChange={change}
                />
                <button type="submit">
                    추가
                </button>
            </form>
        </>
    )
}

export default Memo

 

---

왜 input에 value 값을 써줘야 할까?

input에 입력된 값을 쉽게 가져오려고 써준거다. 받아들이기!!!

 

왜 input 에 value 값을 쓰면 입력이 안되나?

https://kmhan.tistory.com/316
해결방법 : onChange 이벤트를 써서 input 을 수정할 수 있는 상태로 만들어줘야한다.