React

[React] 10. State로 사용자 입력 관리 (1)

서회정's avatar
서회정
Feb 25, 2026
[React] 10. State로 사용자 입력 관리 (1)
Contents
1. 입력폼 컴포넌트 생성2. 이름 입력 폼 생성1. 입력 필드 작성2. useState로 입력 상태 선언3. 이벤트 핸들러로 state 동기화3. 생년월일 입력 폼 생성1. 입력 필드 작성2. useState로 입력 상태 선언3. 이벤트 핸들러로 state 동기화4. 국적 선택 폼 생성1. 입력 필드 작성2. useState로 입력 상태 선언3. 이벤트 핸들러로 state 동기화5. 자기소개 입력 폼 생성1. 입력 필드 작성2. useState로 입력 상태 선언3. 이벤트 핸들러로 state 동기화
 

✅ 목표

  • 사용자의 입력에 따라 바뀌는 상태를 State를 활용하여 저장해보자.
 

✅ 예제

 
💡
간단한 회원가입 입력폼을 만들어보자.
들어가는 내용은 다음과 같다.
  1. 이름
  1. 생년월일
  1. 국적
  1. 자기소개
 

1. 입력폼 컴포넌트 생성

 

App.jsx

import "./App.css";

import Register from "./components/Register";

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

export default App;
 

2. 이름 입력 폼 생성

1. 입력 필드 작성

 
text 타입의 입력폼을 만들기 위해 input 태그를 기입한다.
 
자유롭게 내용을 작성하는 폼이 만들어진다.
 

Register.jsx

import { useState } from "react";

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

export default Register;
 
notion image
 
해당하는 입력 폼에 사용자가 어떤 정보를 입력해야 할 지 알려주는 것이 좋다.
 
input의 placeholder 속성을 사용하면 사용자가 입력을 하기 전에
해당 폼의 사용처를 알 수 있다.
 
<input placeholder="이름" />
 

2. useState로 입력 상태 선언

 
비구조화할당으로 변경된 상태를 담을 name과 이벤트 핸들러에 들어갈 함수인 setName을 useState를 활용하여 만들어준다.
 
초기 값은 일단은 빈문자열로 두자.
 
import { useState } from "react"

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

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

export default Register;
 

3. 이벤트 핸들러로 state 동기화

 
이벤트 핸들러를 통해 사용자 입력에 따라 상태를 변경해야한다.
 
여기서 이벤트 핸들러에 들어가는 매개변수를 출력하는 console.log() 코드를 통해 합성이벤트 객체에서 우리가 바꾸고자 하는 값을 찾을 수 있다.
 
import { useState } from "react";

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

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

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

export default Register;
 
합성 이벤트 객체를 출력해보면 다음과 같은 모습을 볼 수 있다.
우리가 초기 값으로 설정해둔 input 의 value값이 이미지에서 보이는 경로로 들어가 있다.
 
따라서 우리가 변경하고자 하는 값은 e.target.value 라는 결론이 나온다.
 
notion image
 
때문에 상태를 변경하는 이벤트 핸들러 내에 setName이라는 상태 변경 함수를 작성하고, 매개변수로 e.target.value 를 넣어주면 사용자 입력에 따라 상태가 변경되고, 그것을 name이라는 변수에 저장되는 로직을 완성할 수 있다.
 
이러한 이벤트 핸들러는 input태그에 onChange 속성에 넣어주면 되는데, value 속성에도 name 변수를 넣어 데이터를 전달할 수 있다.
 
import { useState } from "react"

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

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

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

export default Register;
 
이 때 변경된 상태가 name이라는 변수에 잘 저장되고 있는지 확인하려면 이를 그대로 화면에 출력해 보면 된다.
 
import { useState } from "react"

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

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

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

export default Register;
 
입력하는 값이 바로바로 name 변수에 저장되어 출력되는 것을 확인할 수 있다.
 
notion image
 
확인을 위해 적어둔 {name}은 삭제하고 계속 진행하도록 하자.
 

3. 생년월일 입력 폼 생성

 
다음은 사용자가 날짜를 입력할 수 있는 폼을 만들어보자.
 

1. 입력 필드 작성

 
input에는 다양한 type 속성이 있다.
이 중에서도 날짜를 선택할 수 있는 폼은 date 타입이다.
 
기본 값은 현재 시간으로 맞추어져있다.
 
import { useState } from "react";

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

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

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

export default Register;
 
notion image
 

2. useState로 입력 상태 선언

 
이름 입력 생성 폼과 동일하게 진행하면 된다.
 
import { useState } from "react";

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

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

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

export default Register;
 

3. 이벤트 핸들러로 state 동기화

 
import { useState } from "react";

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} onChange={onChangeBirth} type="date" />
      </div>
    </div>
  );
};

export default Register;
 

4. 국적 선택 폼 생성

 
select 태그를 활용해서 국적을 선택하는 폼을 만들어보자.
 

1. 입력 필드 작성

 
해당하는 폼은 input이 아닌 select 태그를 활용하여야 한다.
 
select 태그까지만 작성했을 때 클릭해도 아래로 내려오는 선택지가 없는데 이는 option 이라는 태그를 활용하여야한다.
 
import { useState } from "react";

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} onChange={onChangeBirth} type="date" />
      </div>
      <div>
        <select>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
        </select>
      </div>
    </div>
  );
};

export default Register;
 
select 태그는 우리가 기본값을 입력하지 않아도
기본적으로 가장 첫 번째에 있는 option값을
초기값으로 갖는 것이 특징이다.
 
 
notion image
 
초기값으로 아무것도 보이지 않게 하려면 빈 option 태그를 가장 위에 추가해주자.
 

2. useState로 입력 상태 선언

 
import { useState } from "react";

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

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

export default Register;
 

3. 이벤트 핸들러로 state 동기화

 
이벤트 핸들러로 state 를 동기화하고 이를 출력해서 확인할 수 있도록 했다.
 
전달되는 데이터는 value라는 속성에 담기게 되는데,
현재는 한국어로 기입되어있는 국적을 데이터베이스에서는
영문으로 다룰 가능성이 있다.
 
이럴 때는 value를 직접 설정해줄 수 있다.
 
import { useState } from "react";

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} onChange={onChangeBirth} type="date" />
      </div>
      <div>
        <select vlue={country} onChange={onChangeCountry}>
          <option></option>
          <option>한국</option>
          <option>미국</option>
          <option>영국</option>
        </select>
        {country}
      </div>
    </div>
  );
};

export default Register;
 
각 option에 value 속성을 직접 기입하는
방식으로 데이터를 다르게 전달할 수 있다.
 
이렇게 화면을 통해 유저에게 보여줄 정보와
데이터로 넘겨줄 요소를 분리할 수 있는데
country를 출력했을 때 데이터로 넘길
영문 국적이 잘 출력되는 것을 확인할 수 있다.
 
import { useState } from "react";

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} onChange={onChangeBirth} type="date" />
      </div>
      <div>
        <select vlue={country} onChange={onChangeCountry}>
          <option></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
        {country}
      </div>
    </div>
  );
};

export default Register;
 
notion image
 

5. 자기소개 입력 폼 생성

 
자유롭게 자기소개를 입력할 수 있는 폼을 생성해보자.
 

1. 입력 필드 작성

 
장품 입력 폼을 작성할 수 있는 폼은 input 이 아닌
textarea 태그를 사용하여 구현할 수 있다.
 
import { useState } from "react";

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} onChange={onChangeBirth} type="date" />
      </div>
      <div>
        <select value={country} onChange={onChangeCountry}>
          <option></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
      </div>
      <div>
        <textarea />
      </div>
    </div>
  );
};

export default Register;
 
장문을 작성할 수 있는 폼이 생성되었다.
 
notion image
 

2. useState로 입력 상태 선언

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

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

export default Register;
 

3. 이벤트 핸들러로 state 동기화

 
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="이름" />
      </div>
      <div>
        <input value={birth} onChange={onChangeBirth} type="date" />
      </div>
      <div>
        <select value={country} onChange={onChangeCountry}>
          <option></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;
 
Share article

clubnerdy

RSS·Powered by Inblog