[React] 📖 State로 사용자 입력 관리

📍 Register 컴포넌트 생성

Register.jsx

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

export default Register;

App.jsx

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


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

export default App;

---

📍 Register 컴포넌트에서 간단한 회원가입 폼 만들기

ℹ️ 회원가입을 위해 필요한 정보

1. 사용자의 이름
2. 생년월일
3. 국적
4. 자기소개

1. 사용자 이름

📍 onChangeName 컴포넌트 생성

const Register = () =>{
    const [name, setName] = useState(""); // ("") : 빈 문자열

    const onChangeName = (e) => {
        console.log(e);
    }
    
    return (
    <div>
        <input onChange={onChangeName} placeholder={"이름"}/>
    </div>)
};

• input 태그안에 이름 입력 시 이벤트 핸들러(onChange)가 동작되어 이벤트 핸들러 안에 있는 컴포너트(onChangeName)가 실행된다.

❗️ log에서 확인할 수 있는 내용
: input에 사용자가 입력한 값을 확인할 수 있다.
➡️ 즉, input에 저장되어있는 값이 Value에 보관되어있다.

❗️ onChange 란?
: HTML 폼 요소에서 사용자가 입력값을 변경했을 때 실행되는 React 이벤트
: 주로 input, textarea, select 등의 값이 변경될 때 사용

📍 setName(e.target.value);

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

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

이렇게 저장되어 있는 값을 setName에 넣어주면 입력한 텍스트를 전달해서 최종적으로 이 name State에 입력한 값들이 바로바로 저장이 된다.

📍 초기값 설정

• useState (""); 안에 초기값을 넣고 input 태그의 속성인 value에 {name} 을 넣어주면 초기값 설정 완료
  ➡️ state 값으로 입력필드의 값을 설정

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

    const onChangeName = (e) => {
        setName(e.target.value);
    }
    return (
    <div>
        <input value={name} 
        onChange={onChangeName} 
        placeholder={"이름"}/>
        <br></br>
        {name}
    </div>)
};

---

2. 생년월일

<input type="date" /> 

: date picker 가 렌더링된다. (다른 브라우저에서는 다르게 렌더링이 될 수도 있다.)

📍 onChangeBirth 컴포넌트 생성

const [birth, setBirth] = useState("");

const onChangeBirth = (e) => {
	setBirth(e.target.value);
}
return (
	<div>
		<div>
			<input value={name} 
			onChange={onChangeName} 
			placeholder={"이름"}/>
		</div>

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

❗️ 여기서 내 궁금증 : birth는 초기값이 없는데 value={birth}를 받는거지?]
: value 속성에 birth 상태를 연결하는 이유는 React에서 폼 요소의 상태와 컴포넌트를 동기화(양방향 데이터 바인딩)하기 위함

• 양방향 데이터 바인딩 : 상태와 입력 필드의 값이 서로 의존 관계를 가지는 것
• 사용자가 입력필드에서 값을 변경하면 상태가 업데이트되고, 상태가 업데이트 되면 입력필드의 값도 자동으로 변경됨 ➡️ 입력 필드의 값과 React 상태를 일관되게 유지할 수 있다.

❌ value 속성에 상태를 연결하지않을 경우

• 입력필드의 값은 React 상태와 동기화되지않는다. ➡️ 비제어 컴포넌트로 동작
• 비제어 컴포넌트는 값을 다룰려면 참조(Ref)를 사용하거 직접 DOM을 조작해야하는데 이 방법이 React 상태 관리 방식과 맞지않고, 추적하기 어려운 코드가 된다

---

3. 국적

: select 박스 사용

⭐️ select-option
: option 태그 안에 선택지를 만들어준다.
: select 태그는 기본적으로 option들 중에 맨 위에 있는 옵션을 초기값으로 한다.

<select>
	<option>-</option>
	<option>한국</option>
	<option>미국</option>
	<option>영국</option>
</select>

📍 onChangeCountry 컴포넌트 생성

const [country, setCountry] = useState("");

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

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

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

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

---

4. 자기소개

: textarea 태그 사용

⭐️ Textarea 태그
: input 태그와 달리 여러 줄의 입력을 받을 수 있는 태그이다.
: 하지만 input 태그와 동일하게 동작한다.

📍 onChangeBio 컴포넌트 생성

const [bio, setBio] = useState("");

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

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

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

		<div>
			<select value={country} onChange={onChangeCountry}>
				<option>-</option>
				<option>한국</option>
				<option>미국</option>
				<option>영국</option>
			</select>
			{country}
		</div>
        
        <div>
			<textarea value={bio} onChange={onChangeBio}/>
			{bio}
        </div>
	</div>
)

---