💡 Form과 Controlled Component
Form
양식
사용자로부터 입력을 받기 위해 사용
HTML Form
<form>
<label>
이름:
<input type="text" name="name" />
</label>
<button type="submit">제출</button>
</form>
<!-- JavaScript 코드를 통해 사용자가 입력한 값에 접근하기에 불편 -->
<!-- 사용자가 입력한 값에 접근하고 제어할 수 있어야 웹페이지 개발할 때 편리 -->Controlled Components
값이 리액트의 통제를 받는 Input Form Element
- HTML Form 자체적으로 state를 관리
- input, textarea, select 태그 각각 내부 state
- 각각의 값에 접근하기 쉽지 않음
- Controlled Component 모든 데이터를 state에서 관리
- state={} / setState()
- state의 값을 변경할 때 무조건 setState 사용
사용자의 이름을 입력받는 HTML Form을 React Controlled Component
function NameForm(props) {
const [value, setValue] = useState('');
// event 객체, event.target 현재 발생한 event target
// event.target.value, 해당 target의 value 속성의 값
// target은 input Element
// event.target.value는 input Element의 값
const handleChange = (event) => {
setValue(event.target.value);
}
const handleSubmit = (event) => {
alert('입력한 이름: ' + value);
event.preventDefault();
}
return(
<form onSubmit={handleSubmit}>
<label>
이름:
// value 부분, React Component State에서 값을 가져다 넣어주는 것
// State에 들어있는 값이 input에 표시
// 입력값이 변경되어 호출되는 onChange는 handleChange함수 호출
// setValue 함수를 사용하여 새롭게 변경된 값을 Value라는 이름에 state 저장
<input type="text" value={value} onChange={handleChange} />
</label>
<button type="submit">제출</button>
</form>
)
}❕ 사용자의 입력을 직접적으로 제어
모든 입력값을 대문자로 변경
const handleChange = (event) => {
setValue(event.target.value.toUpperCase());
}💡 다양한 Forms
Textarea 태그
여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그
HTML textarea 태그
<textarea>
안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다.
</textarea>
// textarea태그에 children으로 텍스트가 들어감고객으로 요청사항을 입력받기 위한 RequestForm
function RequestForm(props) {
// state로 value
const [value, setValue] = useState('요청사항을 입력하세요.');
const handleChange = (event) => {
setValue(event.target.value);
}
const handleSubmit = (event) => {
alert('입력한 요청사항: ' + value);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
요청사항:
// 화면에 출력
<textarea value={value} onChange={handleChange} />
</label>
<button type="submit">제출</button>
</form>
)
}
// value를 선언할 때 초기값을 넣어줬기 때문에 처음 렌더링될 때부터 textarea에 text가 나타남Select 태그
Drop-down 목록을 보여주기 위한 HTML 태그
<select>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<!-- 포도가 선택된 상태 -->
<option selected value="grape">포도</option>
<option value="watermelon">수박</option>
</select>function FruitSelect(props) {
// Grape로 초기값을 가진 value
// select태그에 value로 넣어줌
const [value, setValue] = useState('grape');
// 값을 Update, 사용자가 옵션을 선택시 Value 하나의 값만 Update
const handleChange = (event) => (
setValue(event.target.value);
}
const handleSubmit = (event) => (
alert('선택한 과일: ' + value);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
과일을 선택하세요:
<select value={value}onChange={handleChange}>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option selected value="grape">포도</option>
<option value="watermelon">수박</option>
</select>
</label>
<button type="submit">제출</button>
</form>
)
}
/* 여러 개의 옵션 선택 가능
<select multiple={true} value={['B', 'C']}>
*/한 눈에 input, textarea, select 태그 보기
// input 태그
<input type="text" value={value} onChange={handleChange} />
// textarea 태그
<textarea value={value} onChange={handleChange} />
// select 태그
<select value={value} onChange={handleChange}>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grape">포도</option>
<option value="watermelon">수박</option>
</select>File input 태그
디바이스의 저장 장치로부터 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그
- Uncontrolled Component
- 값이 읽기 전용, 값이 리액트에 통제를 받지 않음
HTML file input 태그
<input type-"file" />Multiple Inputs
여러 개의 state를 선언하여 각각의 입력에 대해 사용
function Reservation(props) {
const [haveBreakfast, setHaveBreakfast] = useState(true);
const [numberOfGuest, setNumberOfGuest] = useState(2);
const handleSubmit = (event) => {
alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
아침식사 여부:
// 값이 변경되면 setHaveBreakfast를 통해 값을 Update
<input
type="checkbox"
checked={haveBreakfast}
onChange={(event) => {
setHaveBreakfast(event.target.checked);
}} />
</label>
<br />
<label>
방문객 수:
// type = number, 값이 변경되면 setNumberOfGuest를 통해 값을 Update
<input
type="number"
value={numberOfGuest}
onChange={(event) => {
setNumberOfGuest(event.target.value);
}} />
</label>
<button type="submit">제출</button>
</form>
);
}
/* Function Component는 각 state 변수마다 set함수가 따로 존재하기 때문에
이와 같이 각각 set함수를 사용해서 구현 */Input Null Value
// input의 값이 hi로 정해져 있어 값을 바꿀 수 없는 입력 불가
ReactDOM.render(<input value="hi" />, rootNode);
// 타이머에 의해 1초 뒤에 value가 null인 input태그가 렌더링, 입력 가능
setTimeout(function() }
ReactDOM.render(<input value={null} />, rootNode);
}, 1000);
// 사용자가 동시에 자유롭게 입력 가능