3.5 Form

1. 코드 구조

const [value, setValue] = useState("");

// onChange 핸들러
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
  const { currentTarget: { value } } = event; 
  setValue(value); 
};

• useState("초기값")은 value와 setValue를 만들어줍니다.
  • value → 현재 상태값 (문자열)
  • setValue → 상태를 수정하는 함수
• onChange 이벤트가 실행될 때
  • event.currentTarget은 이벤트가 발생한 input 요소를 가리킵니다.
  • event.currentTarget.value는 input 안에 사용자가 입력한 텍스트 값입니다.
  • 구조분해를 통해 const { currentTarget: { value } } = event; 이렇게 새로운 value를 꺼냈습니다.
• 그러니까 setValue(value)는 input에 입력된 텍스트를 상태로 저장하는 것입니다.

즉, 여기서 value는 useState의 value가 아니고,
input 태그의 현재 입력값입니다.

---

2. 왜 헷갈릴 수 있나?

여기서 value라는 이름을 두 군데에서 썼기 때문입니다:

구분	의미
const [value, setValue] = useState("")의 value	현재 컴포넌트 상태값
const {currentTarget: {value}} = event의 value	input에 입력된 텍스트값

이렇게 이름이 겹치지만, 범위(scope) 가 다르기 때문에 서로 다른 value입니다.

• onChange 함수 안에서는 구조분해한 event.currentTarget.value를 가리킵니다.
• `컴포넌트 스코프 밖(onChange 함수 바깥)에서는 useState로 선언한 value**를 의미합니다.

시각화해보면

function App() {
  // 컴포넌트 상태
  const [value, setValue] = useState(""); 
  // value: 현재 저장된 값

  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const { currentTarget: { value } } = event;
    // 여기서 value는 input에 방금 입력된 값!

    setValue(value); 
    // input에 입력한 값을 상태로 저장
  };
}

---

3. 정리

질문: setValue(value)의 value는 뭐야?

→ 답: input에 현재 사용자가 입력한 문자열입니다.
(useState 안의 value가 아닙니다.)

---

4. 추가 참고 — 구조분해 안 하면?

구조분해 없이 작성하면 이렇게 됩니다:

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
  setValue(event.currentTarget.value);
};

• 구조분해 안 쓰고 바로 event.currentTarget.value로 접근할 수도 있습니다.
• 여기서 value는 분명히 input 요소의 value를 말하는 것입니다.

---

5. 실제 사용하는 예시

회사 실전 코드 예시

로그인 폼 작성할 때, 보통 이렇게 작성합니다:

function LoginForm() {
  const [username, setUsername] = useState("");

  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsername(e.currentTarget.value);
  };

  return (
    <form>
      <input value={username} onChange={handleUsernameChange} />
      <button>Submit</button>
    </form>
  );
}

• handleUsernameChange 안에서는 항상 e.currentTarget.value를 사용합니다.

---