state 객체로 묶기

mport { useState } from"react"; functionSignupForm() { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [agree, setAgree] = useState(false); functionhandleSubmit(e) { e.preventDefault(); // 페이지 새로고침 방지console.log("제출 데이터:", { username, email, agree }); alert${username}님, 가입이 완료되었습니다!); } return ( <formonSubmit={handleSubmit}><label> 사용자 이름 <inputtype="text"value={username}onChange={(e) => setUsername(e.target.value)} /> </label><br /><label> 이메일 <inputtype="email"value={email}onChange={(e) => setEmail(e.target.value)} /> </label><br /><label><inputtype="checkbox"checked={agree}onChange={(e) => setAgree(e.target.checked)} /> 약관에 동의합니다 </label><br /><buttontype="submit">가입하기</button></form> ); }

이학습 코드에선 왜
const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [agree, setAgree] = useState(false);

이부분들을 객체로 안 묶고 따로 state로 관리 하는지가 궁금합니다!