Forms

Form과 Controlled Component

 

Form

사용자로부터 입력을 받기 위해 사용

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

 

이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다.
React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다.
그러나 대부분의 경우, JavaScript 함수로 폼의 제출을 처리하고
사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다.
이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)“라고 불리는 기술을 이용하는 것입니다.

 

제어 컴포넌트 (Controlled Component)

값이 리액트의 통제를 받는 Input Form Element

 

HTML Form	Controlled Component
자체적으로 State를 관리	모든 데이터를 State에서 관리

 

예제 코드

import { useState } from "react";

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>
            Name:
            <input type="text" value={value} onChange={handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
    )
}

 

 

모든 입력값을 대문자로 변경

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

 

다양한 Forms

Textarea 태그

<textarea>
  Hello there, this is some text in a text area
</textarea>

import { useState } from "react";

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>
    )
}

 

select 태그

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

import { useState } from "react";

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

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

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

    return (
        <form onSubmit={handleSubmit}>
            <lable>
                과일을 선택하세요:
                <select value={value} onChange={handleChange}>
                    <option value="Grapefruit">자몽</option>
                    <option value="lime">라임</option>
                    <option value="coconut">코코넛</option>
                    <option value="mango">망고</option>
                </select>
            </lable>
            <button type="submit">제출</button>
        </form>
    )
}

 

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

 

File input 태그

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

읽기 전용이기에 React에서는 Uncontrolled Component

<input type="file" />

 

 

Multiple Inputs

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

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

 

 

제어되는 Input Null 값

value prop을 정해진 값으로 넣으면 코드를 수정하지 않는 한 입력 값을 바꿀 수 없다.

value prop은 넣되 자유롭게 입력할 수 있게 하고 싶다면 값에 undefined 또는 null을 넣어주면 된다.

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

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

 

 

---

Reference

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

 

https://ko.legacy.reactjs.org/docs/forms.html

폼 – React