[React] 다양한 Forms

 

✔ Textarea 태그

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

 

• HTML textarea 태그

<textarea>
	안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다.
</textarea>

• React textarea 태그

import React, {useState} from "react";

const styles = {
    text : {
        padding: 10,
        margin: 10,
        fontSize: 20,
        color: "green",
        fontWeight: "bold",
        border: "3px solid black",
        borderRadius: 10,
        width: 500,
        height: 100,
    }
}

function RequestForm(props) {
    const [value, setValue] = useState('요청사항을 입력하세요.');

    const handleChange = (event) => {
        setValue(event.target.value);
    }

    const handleSubmit = (event) => {
        alert('입력한 요청사항: ' + value);
        event.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit} style={{margin: 10}}>
            <label style={{margin: 10}}>
                요청사항:
                <textarea value={value} onChange={handleChange} style={styles.text}/>
            </label>
            <button type="submit" style={{margin: 10}}>제출</button>
        </form>
    )
}

export default RequestForm;

textarea 에 요청사항을 입력한 후, 제출 버튼을 누르면 그 내용이 알림으로 뜨게 된다.

 

 

 

 

✔ Select 태그

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

 

• HTML select 태그

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

• React select 태그

import React, {useState} from "react";

function FruitSelect(props) {
    const [value, setValue] = useState('포도');

    const handleChange = (event) => {
        setValue(event.target.value);
    } 

    const handleSubmit = (event) => {
        alert('선택한 과일: ' + value);
        event.preventDefalut();
    }

    return (
        <form onSubmit={handleSubmit} style={{margin: 10}}>
            <label style={{margin: 10}}>
                과일을 선택하세요:
                <select value={value} onChange={handleChange} style={{margin: 10}}>
                    <option value="사과">사과</option>
                    <option value="바나나">바나나</option>
                    <option value="포도">포도</option>
                    <option value="수박">수박</option>
                </select>
            </label>
            <button type="submit" style={{margin: 10}}>제출</button>
        </form>
    )
}

export default FruitSelect;

기본으로 포도가 선택되게 해놓았기 때문에 처음엔 포도가 선택되어있다.

누르면 옵션이 나오게 되고 사과를 선택해 보겠다.

알림으로 '선택한 과일: 사과' 가 뜬다.

 

 

➕ 만약 여러 개의 옵션을 선택하고 싶으면 아래와 같은 코드를 사용하면 된다.

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

솔직히 이해 못하겠다. 써봤는데 안 된다. 

 

 

 

 

 

✔ File input 태그

: 디바이스의 저장 장치로부터 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그

 

• HTML file input 태그

<input type="file" />

 

 

 

 

✔ Multiple inputs

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

 

• 예시) 호텔 예약을 위한 컴포넌트

import React, { useState } from "react";

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} style={{margin: 10}}>
            <label style={{margin: 10}}>
                아침식사 여부:
                <input 
                    type="checkbox"
                    style={{margin: 10}}
                    checked={haveBreakfast}
                    onChange={(event) => {
                        setHaveBreakfast(event.target.checked);
                    }} />
            </label>
            <br />
            <label style={{margin: 10}}>
                방문객 수:
                <input 
                    type="number"
                    style={{margin: 10}}
                    value={numberOfGuest}
                    onChange={(event) => {
                        setNumberOfGuest(event.target.value);
                    }} />
            </label>
            <button type="submit" style={{margin: 10}}>제출</button>
        </form>
    );
}

export default Reservation;

useState 에 설정해 준 기본상태는 이거다.

식사 여부 체크박스를 해제하고, 방문객 수를 30명으로 설정한 뒤 제출해 본다.

정보가 담긴 알림이 뜬다.