handleNameLengthChange, onChange, event 객체,

handleNameLengthChange 함수의 event 객체 흐름
handleNameLengthChange 함수가 event 객체를 매개변수로 받는 과정과 흐름을 순차적으로 설명하겠습니다.
1. 이벤트 객체의 생성
먼저, 사용자가 입력 필드에 무언가를 입력(키보드 타이핑, 붙여넣기 등)하면, 브라우저는 자동으로 DOM 이벤트를 생성합니다.

브라우저는 input 요소에서 텍스트 변경을 감지하면 change 이벤트를 발생시킵니다.
이 DOM 이벤트는 해당 입력 필드에 대한 정보와 변경 사항에 대한 정보를 담고 있습니다.

2. React의 합성 이벤트(SyntheticEvent) 생성
   React는 브라우저의 원시 DOM 이벤트를 가로채고, 이를 React의 합성 이벤트(SyntheticEvent)로 변환합니다.

React는 브라우저 간 일관성을 유지하기 위해 이러한 추상화를 사용합니다.
합성 이벤트는 표준 DOM 이벤트를 모방하면서도 크로스 브라우저 호환성을 제공합니다.
TypeScript에서 이 이벤트 타입은 React.ChangeEvent로 정의됩니다.

3. 이벤트 속성 설정과 전달
   LabeledInput 컴포넌트의 JSX에서 onChange 속성에 handleNameLengthChange 함수를 연결합니다:
   jsx<LabeledInput
   id="name"
   name="name"
   label="모임 이름"
   type="text"
   ref={nameRef}
   required
   onChange={handleNameLengthChange} // 여기서 함수를 연결
   />
   이 코드는 "이 입력 필드에서 변경 이벤트가 발생하면 handleNameLengthChange 함수를 호출해라"라고 React에 지시합니다.
4. 내부 이벤트 처리 흐름
   이제 내부적인 이벤트 처리 흐름을 단계별로 살펴보겠습니다:

사용자 입력: 사용자가 입력 필드에 "안녕하세요"라고 입력합니다.
DOM 이벤트 발생: 브라우저는 해당 input 요소에 대한 change 이벤트를 생성합니다.
React 이벤트 시스템: React는 이 DOM 이벤트를 가로채고 합성 이벤트 객체로 변환합니다.
이벤트 핸들러 식별: React는 해당 요소에 설정된 onChange 핸들러가 handleNameLengthChange라는 것을 확인합니다.
함수 호출: React는 합성 이벤트 객체를 매개변수로 하여 handleNameLengthChange 함수를 호출합니다.
jsx// React가 내부적으로 다음과 같이 함수를 호출함
handleNameLengthChange(syntheticEvent);

함수 실행: handleNameLengthChange 함수는 이 이벤트 객체를 받아 사용합니다.
jsxconst handleNameLengthChange = (event: React.ChangeEvent) => {
// event.target은 이벤트가 발생한 입력 필드를 가리킴
// event.target.value는 현재 입력 필드에 입력된 텍스트 값
setNameLength(event.target.value.length);
};

상태 업데이트: 함수 내부에서 event.target.value.length를 계산하여 setNameLength 함수를 호출하고, 이는 nameLength 상태를 업데이트합니다.

5. 실제 코드에서의 흐름 시각화
   전체 프로세스를 코드 관점에서 순차적으로 표현하면 다음과 같습니다:
   jsx// 1. 컴포넌트 정의와 함수 설정
   const MeetupForm = () => {
   // 상태 선언
   const [nameLength, setNameLength] = useState(0); // 이벤트 핸들러 정의
   const handleNameLengthChange = (event: React.ChangeEvent) => {
   // 3. 이벤트 객체 사용
   setNameLength(event.target.value.length);
   }; return (

   <div>
     {/* 2. JSX에서 함수 연결 */}
     <LabeledInput 
       onChange={handleNameLengthChange} 
       /* 다른 속성들 */
     />
     <span>{nameLength} / {MAX_NAME_LENGTH} 자</span>
   </div>

   );
   };

// LabeledInput 컴포넌트 내부 (간략화)
const LabeledInput = forwardRef((props, ref) => {
return (
<input
// 여기서 onChange 속성이 실제 DOM 요소에 연결됨
onChange={props.onChange}
/ 다른 속성들 /
ref={ref}
/>
);
});
이 프로세스에서 핵심은 React가 이벤트 리스너를 설정하고, 이벤트가 발생했을 때 자동으로 이벤트 객체를 생성해 지정된 핸들러 함수에 전달한다는 것입니다. 개발자는 이 함수에서 이벤트 객체를 매개변수로 받아 필요한 작업을 수행할 수 있습니다.