11강. Forms

Form과 Controlled Component

Form : 사용자로부터 입력을 받기위해 사용하는 것

//HTML Form
<form>
  <label>
    이름:
    <input type="text" name="name">
  </label>
  <button type="submit">제출</button>
</form>

 

Controlled Components :  사용자가 입력한 값이 접근, 제어가 가능하도록 하는 컴포넌트, 값이 리액트의 통제를 받는 Input Form Element, 사용자의 입력을 직접적으로 제어할 수 있음

function NameForm(props){
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
    //setValue : 새롭게 변경된 값을 value라는 state에 저장
    //event : 이벤트 객체
    //event.target : 현재 이벤트 타겟 = input
    //event.target.value : 해당타겟의 value 속성의 값 = input의 값
  }
  const handleSubmit = (event) =>{
    alert(`입력한 이름:` + value);
    event.preventDefault();
  }
  return(
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange}>
        //value : component state에서 값을 넣어줌
      </label>
      <button type="submit">제출</button>
    </form>
  )
}

//모든 입력값을 대문자로 변경
const handleChange = (event) => {
  setValue(event.target.value.toUpperCase());
}

 

다양한 Forms

Textarea : 여러줄에 걸쳐 긴 텍스트를 입력받기위한 HTML 태그

//HTML
<textarea>
  안녕하세요 여기에 텍스트가 들어갑니다.
</textarea>

//REACT
function RequestForm(props){
  const [value, setValue] = useState('요청사항을 입력하세요.');	//placeholder 역할
  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>
  );
}

 

Select : drop-down 목록을 보여주기 위한 HTML 태그

//HTML
<select>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="grape" selected>포토</option>	//초기값
  <option value="watermelon">수박</option>
</select>

//REACT
function FruitSelect(props){
  const [value, setValue] = useState('grape');	//초기값
  const handleChange = (event) => {
    setValue(event.target.value);	//2.선택된 정보 업데이트
  }
  const handleSubmit = (event) => {	//3.선택된 정보 등록
    alert(`선택한 과일: ` + value);
    event.preventDefault();
  }
  
  return(
    <form onSubmit = {handleSubmit}>
      <label>
          과일을 선택하세요:
          <select value = {value} onChange = {handleChange}>	//1.선택된 정보를 받아서
            <option value="apple">사과</option>
            <option value="banana">바나나</option>
            <option value="grape">포토</option>
            <option value="watermelon">수박</option>
          </select>
      </label>
      <button type="submit">제출</submit>
    </form>
  )
}

 

//여러개의 옵션 선택 가능
<select multiple={true} value={['B', 'C']}>

 

File input : 디바이스의 저장장치로부터 하나 또는 여러개의 파일을 선택할 수 있게 해주는 HTML 태그, 서버로 파일 업로드시, JS 파일 API로 파일을 다룰 때 사용, 읽기전용이므로 리액트에서는 uncontrolled component

//HTML
<input type="file">

//REACT
function Reservation(props){
  const [haveBreakfast, setHaveBreakfast] = useState(true);
  const [numberOfGuest, setNumberOfGuest] = useState(2);
  const handleSubmit = (event) => {
    alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
    event.preventDafault();
  }
  
  return(
    <form onSubmit = {handleSubmit}>
      <label>
        아침식사 여부:
        <input
            type="checkbox"
            checked={haveBreakfast}
            onChange={(event) => {
            	setHaveBreakfast(event.target.checked);
            }}
        >
      </label>
      <br>
      <label>
        방문객 수:
        <input
            type="number"
            value={numberOfGuest}
            onChange={(event) => {
            	setNumberOfGuest(event.target.value);
            }}
        >
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

 

input Null Value : value props은 넣고 자유롭게 입력가능

ReactDOM.render(<input value="hi">, rootNode);
setTimeout(function(){
  ReactDOM.render(<input value={null>, rootNode);
},1000);

 

(실습) 사용자 정보 입력받기

import React, {useState} from "react";

function SignUp(props){
    const [name, setName] = useState("");
    const [gender, setGender] = useState("남자");

    const handleChangeName = (event) => {
        setName(event.target.value);
    };
    const handleChangeGenger = (event) => {
        setGender(event.target.value);
    };

    const handleSubmit = (event) => {
        alert(`이름: ${name}, 성별: ${gender}`);
        event.preventDefault();
    }
    return(
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={name} onChange={handleChangeName}/>
            </label>            
            <br/>
            <label>
                성별:
                <select value={gender} onChange={handleChangeGenger}>
                    <option value="남자">남자</option>
                    <option value="여자">여자</option>
                </select>
            </label>
            <button type="submit">제출</button>
        </form>
    );
}
export default SignUp;