React 상호작용

Event Interaction

• 웹 페이지 (컴포넌트)가 사용자와의 상호작용을 받아드려 그것에 대한 처리를 하는것
• React에서는 addEventListener 함수를 사용하지 않고 on 이벤트 속성을 사용
• on 이벤트 속성을 lowerCamelCase를 따름
• on 이벤트 속성에 콜백 함수를 전달

---

• 각 이벤트의 콜백 함수는 이벤트 객체를 매개변수로 받을 수 있음
• Typescript에서는 이벤트 객체의 타입을 'Event 클래스<이벤트가 발생한 요소>'

onclick

• 클릭 이벤트가 발생했을때

export default function EventComponent() {
	const onClickHandler = () => {
		alert('클릭을 했습니다.)
	}
	return (
		<>
			<button onClick={onClickHandler}>클릭!</button>
		</>
	)
}

• Event 클래스<이벤트가 발생한 요소>

import React, {MouseEvent} from 'react'

export default function EventComponent() {
	const onClick2Handler = (event: MouseEvent<HTMLDivElement>) => {
		console.log(event);
	};
	return (
		<>
			<div onClick={onClick2Handler}>마우스 이벤트</div>
		</>
	)
}

onKeyDown

• input 요소에서 키보드 입력이 발생했을 때

import React, {KeyboardEvent} from 'react'

export default function EventComponent() {
	const onKeyDownHandler = (event:KeyboardEvent<HTMLInputElement>) =>{
		console.log("keydown: " + event.key)
	}
	return (
		<>
			<input onKeyDown={onKeyDownHandler} />
		</>
	)
}

onChange

• 요소의 값이 변경 될때 (input 요소에서 값이 변경될 때)

import React, {KeyboardEvent, ChageEvent} from 'react'

export default function EventComponent() {
	const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) =>{
		console.log("keychage:" + event.target.value)
	};
	return (
		<>
			<input onKeyDown={onKeyDownHandler} onChange={onChangeHandler}/>
		</>
	)
}

• onKey & onChage 차이점

| keyDown : f | -> 하나의 글자
| keyChange : abcdef | -> 변화하는글자의 전체 (상태)

event 형태가 아닌 경우

import React, {MouseEvent} from 'react'

export default function EventComponent() {

	onst onClick3Handler = (str:string) => {
		alert(str);
	}
	
	};
	return (
		<>
			<button onClick={()=>onClick3Handler('안녕')}>매개변수 클릭</button>
		</>
	)
}

• 호출을 해주는 것이 아니라 전달 시도 해야함
• 콜백 함수의 매개변수가 event 만 받는 형태가 아니라면 직접적으로 전달하여 사용할 수 없음
• 함수를 이벤트에 등록하고자 하면 해당 이벤트 속성에 직접 익명 함수 표현식을 사용하여 선언 후 전달

활용예시

export default function EventComponent() {

	const employees = [
		{
			name : '홍길동',
			employeeNumber : '202401'
		},
		{
			name : '김철수',
			employeeNumber : '202402'
		}
	]
	
	const onShowEmployeeNumber = (employeeNumber: string) => {
		alert('사번: '+ employeeNumber)
	}
	return (
		<>
			<button onClick={()=>onClick3Handler('안녕')}>매개변수 클릭</button>	
			{employees.map((item, index)=>(
				<div key={index}>
					<h1>{item.name}</h1>
					<button onClick={()=>onShowEmployeeNumber(item.employeeNumber)}>사번 확인</button>
				</div>
			))}
		</>
	)
}