이전 포스트인 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 = (..

▶ 사용자에게 입력 받을 데이터의 양식. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지의 여부를 설정. - on, off 값 지정. 기본값: on. - cf. 에서 autocomplete 속성 설정 시 범위 내의 모든 데이터 양식에 설정되는 데 비해 의 경우 해당 요소 하나에 대해서만 설정됨. autofocus: 페이지가 load될 때 특정한 양식 부분에 자동으로 포커스 처리 여부 설정. - boolean값. - focus는 한 곳만 가능하기 때문에 문서 내 고유해야 함. checked: 양식이 선택되었음을 표시. - boolean값. - type 속성의 값이 radio, checkbox일 경우만 해당. readonly: 수정 불가한 읽기 전용 설정. - b..