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

사용자 입력을 처리하는 방법을 살펴보기 위해 간단한 회원가입 폼을 렌더링하는 Register 컴포넌트를 만들어봅니다.

[Register.jsx]

const Register = () => {
  return <div>Register</div>;
};

export default Register;

Register 컴포넌트를 부모 컴포넌트인 App 컴포넌트에 추가하여 배치합니다.

[App.jsx]

import Register from "./components/Register";

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

export default App;

Register 컴포넌트에 간단한 회원가입 폼을 만들어줍니다.

<간단한 회원가입 폼>
1. 이름
2. 생년월일
3. 국적
4. 자기소개

이름

먼저, input 태그에 사용자가 입력한 이름을 저장할 state를 생성해 관리합니다. 초기값에는 빈 문자열을 설정합니다.

[Register.jsx]

import { useState } from "react";

const Register = () => {
  const [name, setName] = useState("");

  return (
    <div>
      <input placeholder={"이름"} />
    </div>
  );
};

export default Register;

사용자가 input 태그에 텍스트를 입력하면, 입력된 텍스트가 name 상태에 저장되도록 해야 합니다. 이를 위해, onChange 이벤트 핸들러를 설정하고, onChangeName이라는 함수로 정의합니다.

[Register.jsx]

import { useState } from "react";

const Register = () => {
  const [name, setName] = useState("");

  const onChangeName = () => {};

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

export default Register;

onChangeName 함수에서는 input에 입력된 값을 받아와 setName 함수를 호출하여 state에 저장합니다. 사용자가 input에 작성한 텍스트는 event.target.value를 통해 접근할 수 있습니다. 이 값을 setName() 함수에 전달하여 name state에 저장되도록 합니다.

[Register.jsx]

import { useState } from "react";

const Register = () => {
  const [name, setName] = useState("");

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

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

export default Register;

이때, input 태그에 초기값을 설정하려면 useState 함수에 초기값을 전달하고, input 태그의 value 속성을 name state로 설정하면 됩니다.

[Register.jsx]

import { useState } from "react";

const Register = () => {
  const [name, setName] = useState("Ahnzi");

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

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

export default Register;

React에서 state를 이용해 사용자의 입력을 저장하고 처리할 때, 초기값을 설정하는 경우가 많습니다. 이때 onChange 속성뿐만 아니라 value 속성도 함께 설정해주어야 합니다.

생년월일

생년월일과 같은 날짜 데이터도 input 태그를 통해 입력받을 수 있습니다. 이를 위해 input 태그의 type 속성을 "date"로 설정하면 됩니다. 또한, 사용자가 생년월일 입력란에 입력한 값도 state를 사용해 저장하도록 합니다.

[Register.jsx]

import { useState } from "react";

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

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

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

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
      </div>
      <div>
        <input type="date" value={birth} onChange={onChangeBirth} />
      </div>
    </div>
  );
};

export default Register;

국적

국적처럼 선택 범위가 제한된 경우에는 사용자가 선택할 수 있는 항목을 제공하기 위해 select 박스를 사용하는 것이 적합합니다.

[Register.jsx]

import { useState } from "react";

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

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

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

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
      </div>
      <div>
        <input type="date" value={birth} onChange={onChangeBirth} />
      </div>
      <div>
        <select>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;

페이지를 새로고침하면 select 박스의 초기값이 “한국”으로 설정되는 것을 볼 수 있습니다. 이는 select 태그가 기본적으로 첫 번째 option 항목을 초기값으로 사용하기 때문입니다. 초기값을 비워두고 싶다면, 빈 option 항목을 추가하여 이를 초기값으로 설정할 수 있습니다

[Register.jsx]

import { useState } from "react";

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

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

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

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
      </div>
      <div>
        <input type="date" value={birth} onChange={onChangeBirth} />
      </div>
      <div>
        <select>
          <option></option>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;

이제 사용자가 선택한 국적도 state를 사용해 저장합니다. onChange 이벤트 핸들러를 활용해 사용자가 선택한 값을 state에 반영할 수 있도록 설정합니다.

[Register.jsx]

import { useState } from "react";

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

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

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

  const onChangeCountry = (event) => {
    setCountry(event.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
      </div>
      <div>
        <input type="date" value={birth} onChange={onChangeBirth} />
      </div>
      <div>
        <select value={country} onChange={onChangeCountry}>
          <option></option>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;

select 박스의 경우, 화면에 표시되는 선택지와 코드에서 사용하는 값을 다르게 설정할 수 있습니다. 예를 들어, “한국”이라는 옵션의 value를 "kr"로 설정하면, 사용자가 “한국”을 선택했을 때 state에는 "kr"이 저장됩니다.

이처럼, 화면에는 친절하고 자세한 텍스트를 표시하면서 내부적으로는 간결한 값을 사용하는 경우가 많습니다. 이를 위해 각 option 태그에 적절한 value 속성을 정의하여 선택된 값을 효율적으로 관리합니다.

[Register.jsx]

import { useState } from "react";

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

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

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

  const onChangeCountry = (event) => {
    setCountry(event.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
      </div>
      <div>
        <input type="date" value={birth} onChange={onChangeBirth} />
      </div>
      <div>
        <select value={country} onChange={onChangeCountry}>
          <option value=""></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;

자기소개

마지막으로 자기소개를 입력받기 위해 textarea 태그를 사용합니다. textarea 태그는 여러 줄의 텍스트를 입력받을 때 적합하며, 입력된 내용을 state를 통해 관리합니다.

[Register.jsx]

import { useState } from "react";

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

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

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

  const onChangeCountry = (event) => {
    setCountry(event.target.value);
  };

  const onChangeBio = (event) => {
    setBio(event.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
      </div>
      <div>
        <input type="date" value={birth} onChange={onChangeBirth} />
      </div>
      <div>
        <select value={country} onChange={onChangeCountry}>
          <option value=""></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
      </div>
      <div>
        <textarea value={bio} onChange={onChangeBio} />
      </div>
    </div>
  );
};

export default Register;