[ReactJS] Forms

Form

텍스트 입력, 체크박스 등 사용자가 선택하는 모든 것을 의미한다. 즉 사용자로부터의 입력을 받기위해 사용한다.

Controlled Components

사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 컴포넌트이다. 리액트의 통제를 받는 Input Form Element을 의미한다. 사용자의 이름을 입력받는 예제코드이다.

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

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

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

사용자의 입력을 직접적으로 제어할 수 있다는 특징을 가지고 있다.

Textarea 태그

여러 줄에 걸쳐 킨 텍스트를 입력받기 위한 HTML 태그이다. 리액트에서는 다음과 같이 쓰인다.

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 태그

Drop-down 목록을 보여주기 위한 HTML 태그이다. 여러 목록들 중 하나를 선택할 수 있는 형태로 존재한다.

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

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

    const handleSubmit = (event) => {
        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>
    )
}

File Input 태그

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

<input type = "file" />

값이 읽기 전용이기 때문에 Uncontrolled Component에 해당된다.

Multiple Inputs 예제

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

export default Reservation;

input value의 값을 특정값으로 고정해뒀다가 시간이 지난 후 null로 설정하는 방식으로 특정 시점 이후에 사용자의 입력을 받을 수 있도록 기능을 구현하는 것 또한 가능하다.

---

< Source />

SignUp.jsx

import React, { useState } from "react";

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

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

    const handleSubmit = (event) => {
        alert(`이름 : ${name}`);
        event.preventDefault();
    }

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

export default SignUp;

※ 본 게시글은 소플님의 강의 영상을 참고하여 작성되었습니다. 개인적인 공부 목적으로 사용하고 있고, 문제 시 비공개 전환하도록 하겠습니다.