인프런12 다양한 Form

TextArea 태그

---

여러줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그
React에서는 Controlled Component방식이고 값을 Component의 State를 통해 다룰 수 있다.
ex)

<textarea>
	function RequestFOrm(props){
    	const [value, setValue] = useState('요청사항을 입력하세요');
        
        const handleChange = (event) => {
        	alter('입력한 요청사항:' + value);
            event.preventDefault();
        }
        
        return(
        	<form onSubmit={handleSubmit}>
            	<label>
                	요청사항:
                    <textarea value={value} onChange={handleChange} />
                </label>
                <button type="submit">제출</button>
            </form>
        )
    }
</textarea>

고객으로 요청사항을 입력받기위한 Form이다.
useState로 초기값을 넣어주었다.

Select 태그

---

Drop-down 목록을 보여주기 위한 HTML 태그
Drop-Downa목록: 여러 옵션중 하나를 선택할 수 있는 기능

<select>
	<option value="apple">사과</option>
    <option value="banan">바나나</option>
    <option selected value="grape">포도</option>
    <option value="watermelon">수박</option>
</select>

<select>태그를 <option>태그가 감싸는 형태이다.
<option>은 "select"옵션을 가지고 있고 선택되어있는 상태를 나타낸다.

ex)

function FruitSelect(props){
	const [value, setValue] = useState('grape');
    
    const handleChange = (event) => {
    	setValue(event.target.value);
    }
    //값이 변경되는 경우 handleChange함수에서 setValue를 사용하여 업데이트 해준다.
    const handleSubmit = (event) => {
    	alert('선택 과일: ' + value);
        event.preventDefault();
    }
    
    return(
    	<form onSubmit={handleSubmit}>
        	<label>
            	과일을 선택하세요
                <select value={value} onChange={handleChange}>
                <option value="apple">사과</option>
                <option value="banan">바나나</option>
                <option value="grape">포도</option>
                <option value="watermelon">수박</option>
                
                </select>
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

다중옵션을 원할경우

<select multiple={true} value={['B','C']}>

multiple을 true로 하고 value로 선택된 옵션을 가지는 배열을 넣어주면 된다.

즉
value라는 값을 통해 값을 전달하고
값의 변경을 원한다면 onChange={handleChange}에서 setValue를 통해 변경한다.

//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 태그
HTML fileinput 태그

<input type="file" \> 와 같다

보통은 서버로 파일을 업로드 하거나 JS파일 API를 사용해 파일을 다룰 때 사용한다.

하나의 컴포넌트에서 여러 입력이 필요할 때

---

Multiple Inputs
여러 개의 state를 선언하여 각각의 입력에 대해 사용

ex) 예약을 위한 Reservation코드
선택사항이 복수이다.

function Reservation(props){
	const [haveBreakast, setHaveBreakfast] = useState(true);
    cont [numberOfGuest, setNumberOfGuest] = useState(2);
}

const handleSubmit = (event) => {
	alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
    event.preventDefault();
}

return(
	<form onSubmit{handleSubmit}>
    	<label>
        아침 식사 여부:
        <input
        	type="chectbox"
            checked={haveBreakfast}
            onChange={(event) => {
            	setHaveBreakfast(event.target.checked);
            }}/>
            //값이 변경되면 setHaveBreakfast를 통해 변경된다.
        </label>
        <br />
        <label>
        	방문객 수:
            <input
            <type
            	type="number"
                value={numberOfGuest}
                onChage={(event)=> {
                	setNumberOfGuest(event.target.value);
                }}
            />
            //값이 변경되면 setNumberOfGuset를 통해 값이 변경된다.
        </label>
        <button type="submit"> 제출 </button>
    </form>
)

input Null Value

---

value props를 넣지만 자유롭게 입력할 수 있게 하고싶다면
값에 "undefined" 혹은 "Null"을 넣어준다.

ReactDom.render(<input value="hi"/>, rootNode)
//1. 값을 변경할 수 있는 입력불가 상태였다가.
setTimeout(function() {
	ReactDOM.render(<input value={null} />, rootnode);
}, 1000);
//2. 타이머에의해 1초 후 rendering을 통해 입력 가능한 상태로 변경한다.

이러한 방법을 사용하면 value props를 넣으면서 사용자가 자유롭게 입력할 수 있게 만들 수 있다.