TIL 4/15

const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    // console.log(event.currentTarget.value);
    const {currentTarget: {value}} = event;
  };

이 코드는

const {currentTarget: {value}} = event;

이 코드와 같다.

const target = event.currentTarget;
const value = target.value;

---

### gpt내용
**JavaScript 구조 분해 할당(destructuring)** 문법과 **React의 이벤트 시스템**이 섞여 있다

```tsx
const { currentTarget: { value } } = event;

이건 이렇게 풀어서 쓴 걸 줄여 쓴 구조예요:

const target = event.currentTarget;
const value = target.value;

즉, event.currentTarget.value를 한 줄에 구조 분해로 꺼내는 겁니다.

---

✅ 그럼 currentTarget이 뭐냐?

📌 event.currentTarget

• form, input, button 등에 onChange, onClick 같은 이벤트가 발생했을 때,
• event.currentTarget은 이벤트가 연결된 그 요소 자신을 의미합니다.

→ 지금은 input에 onChange를 달았으니까:

event.currentTarget === <input />

그리고 <input />에는 사용자가 입력한 값이 value로 들어가죠.

---

✅ 구조 분해 다시 설명

const { currentTarget: { value } } = event;

이건 아래랑 같아요:

const currentTarget = event.currentTarget;
const value = currentTarget.value;

→ 결국 value는 입력된 문자열 값을 의미합니다.

✅ 최종 요약

코드	의미
event.currentTarget.value	이벤트가 발생한 요소(input)의 현재 입력 값
{ currentTarget: { value } } = event	구조 분해 할당으로 바로 value만 꺼냄
setValue(value)	상태 업데이트 (없으면 화면 반응 안 함)

---

💬 구조 분해 할당이 헷갈리면?

처음엔 그냥 이렇게 써도 좋아요:

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

이거랑

setValue(event.currentTarget.value);

이거랑

const { currentTarget: { value } } = event;
setValue(value);

같은 코드이다.