$$config title: [JavaScript + React] 여러개의 input 관리하기 keywords: - javascript - react $$ ### ☝ 하나의 input 생성 - 일반적으로 하나의 input값을 줄 때는 아래의 코드처럼 구현하면 된다. (Todolist 응용) ```js const TodoInsert = ({ onInsert }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); console.log(e); }; const onSubmit = (e) => { e.preventDefault(); //새로고침 되는 것 방지 setValue(""); // 입력하면 칸 비워주기 onInsert(value); // 할일 추가 todos 배열에 value 추가해주는것 }; return ( ); }; export default TodoInsert; ``` * input 안에 들어갈 값 : onChange함수 / value값 / placeholder - (1) value 값을 useState로 세팅해둠 - (2) onChange함수의 setValue값에 e.target.value로 입력값 넣어둠 --- ### ? 여러개의 input 생성 - title, content 두개의 input값을 주려고한다. (게시글리스트 코드 응용) ```js const initialInput = { title: "", content: "" }; const [input, setInput] = useState(initialInput); const { title, content } = input; const onChange = (e) => { const { value, name } = e.target; setInput({ ...input, [name]: value, }); }; (… 생략 …) (<-- 리액트 코드 -->)