[React] 함수 직접 할당 vs 익명 함수 할당_수정 중

function handleChange (inputIdentifier,newValue) {
	setUserInput(prevUserInput => {
		return {
			...prevUserInput,
			[inputIdentifier]: newValue,
		}
	});
}

첫번째

<input type="number" required onChange={handleChange}/>

onChange 속성에 handleChange 함수를 직접 할당하고 있다.
React는 이 함수를 이벤트 핸들러로 사용하게 된다.

-함수에 자동으로 입력값 정보가 전달됨

두번째

<input type="number" required onChange={() => handleChange()}/>

onChange 속성에 익명 함수를 할당하고 있다.
즉, onChange 이벤트가 발생할 때마다 새로 생성된 함수가 호출된다.

handleChange 함수가 호출될 때 인자가 전달되지 않는다.

-입력값 정보를 직접 전달함
-다른 값을 같이 전달해야 할 때 유용

결론

언제 사용하면 좋을까?

1번 (onChange={handleChange})

• 입력값만 처리하면 되는 간단한 상황
• 추가로 전달해야 할 데이터가 없을 때

2번 (onChange={() => handleChange()})

• 입력값 외에도 다른 데이터를 같이 전달해야 할 때
• 특정 입력 필드의 고유 ID나 이름을 같이 전달해야 할 때
• 한 가지 함수로 여러 입력 필드를 처리하려고 할 때