[React] 여러 개의 input 상태 관리하기


[React] 여러 개의 input 상태 관리하기

이전 포스트인 input 상태 관리하기의 응용 name 식별자를 사용하여 여러 개의 input 박스의 상태를 관리하는 예이다. 이번 챕터에서 가장 중요한 것은 객체 상태를 업데이트 하는 것인데, 리액트에서 객체를 업데이트 할 때는 반드시 기존 객체를 먼저 복사해야 한다. 먼저 InputSample.js 파일을 생성한다. import React, {useState} from 'react'; function InputSample() { // 객체 형태의 상태를 관리 const [inputs, setInputs] = useState({ name : '', nickname: '' }) // 네임과 닉네임 값을 간편하게 사용하기 위해 name, nickname 값을 비구조화 할당으로 추출 const {name, nickname} = inputs; const onChange = (e) => { // name 값 추출 console.log(e.target.name); // value 값 추출 c...


#input #mutiple #React #리액트 #여러개 #인풋

원문링크 : [React] 여러 개의 input 상태 관리하기