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

이번에는 state로 사용자의 입력을 관리해볼 것이다.

 

간단한 예시로 회원가입 컴포넌트를 만들어 보았다.

//Register.js
import React, { useState } from "react";

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

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

export default Register;

먼저 인풋에 들어오는 값으로 사용자의 이름을 설정해보자.

//Register.js
import React, { useState } from "react";

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

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

  const onChangeName = (e) => {
    console.log(e);
  };

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

export default Register;

onChange 함수를 통해서 인풋에 들어오는 값이 변경될 때마다 이벤트 객체를 출력하도록 하였다.

 

출력되는 이벤트 객체를 잘 살펴보자

 

사진을 잘 살펴보면 이벤트 객체의 target 안에 value 라는 곳에 내가 입력한 값이 저장된 것을 알 수 있다. 이를 통해서 사용자의 이름을 설정하자.

 

import React, { useState } from "react";

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

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

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

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

export default Register;

onChangeName 함수가 잘 작동하는지 확인하기 위해서 {name}을 통해 바뀐 값을 직접 확인해보았다.

 

만약 초기값을 설정하고 싶다면 다음과 같이 할 수 있다.

import React, { useState } from "react";

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

const Register = () => {
  const [name, setName] = useState("너의이름은");

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

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

export default Register;

useState 안에 설정하고자 하는 초기값을 입력한 후에 인풋 태그의 속성으로 value = {name}을 해주면 된다.

 

 

 

이번에는 생년월일 렌더링 해보자.

 

이 과정은 이름을 입력 받는 과정과 동일하다.

import React, { useState } from "react";

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

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

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

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

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

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

export default Register;

 

 

 

이제 국적을 입력받아보자.

 

국적과 같이 제한된 범위에서 선택하는 것은 보통 select box를 사용한다.

import React, { useState } from "react";

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

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

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

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

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

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

      <div>
        <select>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
          <option>중국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;

이렇게 할 수 있다.

select는 맨 위에 있는 option을 초기값으로 가진다. 따라서 지금은 한국을 초기값으로 가지는데 이게 싫다면 맨 위에 빈 option을 추가해주자.

 

import React, { useState } from "react";

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

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

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

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

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

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

      <div>
        <select>
          <option></option>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
          <option>중국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;

국적도 state를 통해서 보관해보자

 

지금까지 한 과정을 똑같이 반복하자.

 

그리고 select 태그에 다음과 같이 속성을 추가해주자. 그리고 country를 화면에 렌더링해서 확인해보면 잘 작동하는 것을 알 수 있다.

import React, { useState } from "react";

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

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

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

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

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

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

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

      <div>
        <select value={country} onChange={onChangeCountry}>
          <option></option>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
          <option>중국</option>
        </select>
        {country}
      </div>
    </div>
  );
};

export default Register;

 

만약 여기서 저장되는 value의 값을 약칭을 통해서 저장하고 싶다면 option의 속성을 다음과 같이 할 수 있다.

import React, { useState } from "react";

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

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

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

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

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

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

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

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

export default Register;

이렇게 하면 저장되는 값은 us이다.

 

일반적으로 선택지에는 친절하고 길게 텍스트를 명시하고 내부적으로는 간결한 값을 사용한다.

 

 

 

마지막으로 자기소개를 입력받는 칸을 만들어보자

 

여기서는 textarea를 사용하는데 textarea는 사용자가 크기를 마음대로 조절할 수 있다.

 

동작은 인풋태그와 동일하게 작동한다.

 

import React, { useState } from "react";

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

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={"이름"} />
      </div>

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

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

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

export default Register;

동일하게 state를 만들고 이벤트 핸들링 함수도 함께 만들어 주었고 bio를 화면에 렌더링 하여 잘 작동하는지 확인하였다.