[React] Form과 Controlled Component

Form

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

HTML 형식의 Form

 

Controlled Component

- 값이 리액트의 통제를 받는 Input Form Element
- 사용자의 입력을 직접적으로 제어할 수 있음!

 

HTML에서의 Form과 Controlled Component의 차이

이런식으로 사용자가 값을 입력시, 입력한 값을 직접적으로 제어할 수 있음

사용자가 입력한 값을 대문자로 변경

 

 

 

textarea 태그

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

 

 

Select 태그

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

각각 input, textarea, select 태그

 

File Input 태그

- 디바이스의 저장 장치로부터 하나 또는 여러개의 파일을 선택할 수 있게 해주는 HTML 태그
- 읽기 전용이므로 Uncontrolled Component, 리액트의 통제를 받지 않는다.

 

Multiple Inputs

- 하나의 컴포넌트에서 여러개의 입력을 다루려면 어떻게 해야 할까?
- 여러개의 state를 선언하여 각각의 입력에 대해 사용

각각 set을 달리하여 값을 집어넣으면 된다.

 

Input Null Value

- 앞에서 배운 것 처럼 제어 컴포넌트에 value prop을 정해진 값으로 넣으면 코드 수정하지 않은 한 입력값 변경 불가능
- value prop을 넣되 자유롭게 입력하게 만들고 싶으면 값에 undifined 혹은 null을 넣으면 된다.

자유롭게 입력하고 싶을 때, null을 값에 넣음

 

 

 

 

실습 : 사용자 정보 입력받기

사용자 이름 입력 받기

 

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;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import SignUp from './chapter_11/SignUp';

ReactDOM.render(
  <React.StrictMode>
  <SignUp />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

이름을 입력 받으면 알림창에 사용자의 이름이 뜨도록 한다.

 

 

 

성별 정보 추가

import React, { useState } from "react";

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

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

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

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

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

export default SignUp;

select 태그를 통해 handleChangeGender 라는 이벤트 핸들러로 성별 정보를 변경하게끔 만들었다. gender 라는 state 가 추가되었다.

 

 

 

 

입력 결과 다음과 같이 알림창이 뜬다.