[React] State로 사용자 입력 관리하기1

간단한 회원가입 폼 만들기

이벤트 핸들러 사용

• input 태그에 값을 입력했을 때 이벤트 핸들러인 onChangeName 함수가 실행되면서 serName 함수를 호출하고, e.target.value로 입력한 텍스트를 전달해서 NameState에 입력한 값들이 바로바로 보관이 된다.

• 입력하는 값을 useState의 초기값으로 설정하기도 하기 때문에 input onChage 속성말고도 value 속성도 함께 설정 해야 한다.

Register 컴포넌트

import { useState } from "react";

// 간단한 회원가입 폼
// 이름, 생년월일, 국적, 자기소개

const Register = () => {
  const [name, setName] = useState("이름");
  const [birth, setBirth] = useState("");
  const [country, setCountry] = useState("");
  const [bio, setBio] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeBirth = (e) => {
    setBirth(e.target.value);
  };

  const onChangeCountry = (e) => {
    setCountry(e.target.value);
  };
  const onChangeBio = (e) => {
    setBio(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
        {name}
      </div>

      <div>
        <input value={birth} onChange={onChangeBirth} type="date" />
      </div>

      <div>
        <select value={country} onChange={onChangeCountry}>
          <option value=""></option>
          <option value="kr">한국</option>
          <option value="uk">영국</option>
          <option value="us">미국</option>
        </select>
        {country}
      </div>

      <div>
        <textarea value={bio} onChange={onChangeBio} />
      </div>
    </div>
  );
};

export default Register;

App 컴포넌트

• Register 컴포넌트를 추가한다.

import "./App.css";
import Register from "./components/Register";

function App() {
  return (
    <>
      <Register />
    </>
  );
}
export default App;

• 화면에 렌더링된 결과는 다음과 같다.
• 각 입력폼마다 잘 작동되는 것을 확인할 수 있다.
  

강의 출처:
https://www.inflearn.com/course/한입-리액트