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

React에서 input 창에 간단한 텍스트 입력 및 초기화에 대한 소스 예시 먼저 InputSample.js 파일을 생성하고 아래 소스를 적용한다. function InputSample() { const [text, setText] = useState(''); // 하단 input 박스에서 값 변경 시 이벤트 객체가 파라미터(e)에 담겨서 온다. const onChange = (e) => { // e.target에는 이벤트가 발생한 input DOM에 대한 정보를 가지고 있다. console.log(e.target); // 이벤트가 발생한 DOM의 값 가져오기 console.log(e.target.value); setText(e.target.value); } // 초기화 const onReset = (..