[소플] ch 11. 폼

폼

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

 

1. 제어 컴포넌트 

 

- 사용자가 입력한 값에 접근하고  제어할 수 있도록 해주는 컴포넌트 

- 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 (input from element)

- 제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리됨

 

- HTML 폼에서는 각 엘리먼트가 자체적으로 state를 관리하게 됨 

- <input>, <textarea>, <select>가 각각 내부의 state를 관리하고 있음 

 

- 제어 컴포넌트에서는 모든 데이터를 state에서 관리 

- state 값을 변경할 떄는 setState() 함수를 사용 

- 함수 컴포넌트에서는 useState() 훅을 사용하여 state를 관리 

 

ex)

- <input> 태그의 value={value} 부분은 리액트 컴포넌트의 state에서 값을 가져다 넣어 주는 것 

- state에 들어있는 값이 input에 표시됨

- handleChange() 함수에서는 setValue() 함수를 사용하여 새롭게 변경된 값을 value라는 이름의 state에 저장 

 

- event = 이벤트 객체 

- event.target = 현재 발생한 아벤트의 타겟

- event.target.value = 해당 타겟의 value 속성값

function NameForm(props) {
    const [value, setValue] = useState('');

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

    const handleSubmit = (event) => {
        alert('입력한 이름: ' + value);
        event.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={value} onChange={handleChange}/>
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

 

 

2. textarea 태그 

 

- 여러 줄에 걸쳐서 나올 정도로 긴 텍스트를 입력받기 위한 HTML 태그 

 

HTML

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

 

- 리액트에서는 <textarea> 태그에 value라는 attribute를 사용하여 텍스트를 표시 

 

ex)

- 고객으로부터 요청사항을 입력받기 위한 RequestForm 컴포넌트 

- state로는 value가 있고, 이 값을 <textarea>태그의 value라는 attribute에 넣어줌으로써 화면에 나타나게 됨 

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}>
            <label>
                요청사항:
                <textarea value={value} onChange={handleChange} />
            </label>
            <button type="submit"> 제출 </button>
        </form>
    )
}

 

 

3. select 태그 

 

- 드롭다운(drop-down) 목록을 보여주기 위한 HTML 태그 

- 여러 가지 옵션 중에서 하나를 선택할 수 있는 기능을 제공

 

HTML 

- 현재 선택된 옵션의 경우 selected라는 attribute를 갖고 있음 

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

 

-리액트에서는 <option>태그의 selected 속성을 사용하지 않고 <select> 태그에 value라는 attribute를 사용하여 값을 표시

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

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

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

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

 

4. File input 태그 

 

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

- 서버로 파일을 업로드하거나 자바스크립트의 FIie API를 사용해서 파일을 다룰 때 사용 

- 비제어 컴포넌트 

 

<input type="file" />

 

 

5. 여러 개의 입력 다루기 

 

- 여러 개의 state를 선언하여 각각의 입력에 대하여 사용하면 됨 

 

Reservation 컴포넌트 

 

- 아침식사 선택 유무를 입력받기 위한 <input> 태그는 type이 checkbox로 되어 있고, 값이 변경되면 setHaveBreakfast() 함수를 통해 값을 업데이트 

- 방문객 수를 입력받기 위한 <input> 태그는 type이 number로 되어 있고, 값이 변경되면 setNubmerOfGuest() 함수를 통해 업데이트 

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>
                아침식사 여부:
                <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>
    )
}

 

 

6. Input Null Value

 

- 제어 컴포넌트에 value prop을 정해진 값으로 넣으면 코드를 수정하지 않는 한 입력값을 바꿀 수 없음

- value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶다면 값에 undefiend 또는 null을 넣어주면 됨 

 

- input의 값이 hi로 정해져 있어서 값을 바꿀 수 없는 입력 불가 상태였다가 timer에 의해 1초 뒤에 value가 null인 <input>태그가 렌더링 되면서 입력 가능한 상태로 바뀜

ReactDOM.render(<input value="hi" />,rootNode);

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

 

 

7. 실습 - 사용자 정보 입력받기 

 

- 사용자의 정보를 입력받는 가입 양식 컴포넌트 

 

Signup.jsx

import React, { useState } from "react";

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

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

    const handleChangeGender = (event) => {
        setGender(event.target.value);
    }

    const handleSubmit = (event) => {
        alert(`이름:${name}, 성별:${gender}`);
        event.prventDefault();
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={name} onChnage={handleChangeName} />
            </label>
            <label>
                성별:
                <select value={gender} onChange={handleChangeGender} >
                    <option value="남자">남자</option>
                    <option value="여자">여자</option>
                </select>
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

export default Signup;