[React] 리액트에서 이벤트를 다루는 방법

🎯 리액트에서 이벤트 다루는 방법

• 리액트에서 이벤트의 이름은 카멜(Camel) 표기법으로 사용한다.
• 문자열이 아닌 JSX 함수명으로 전달한다. (onClick={함수명})

 

📝 이벤트 처리(핸들링) 방법

• 이벤트를 실행할 코드를 그대로 전달하는 것이 아니라 아래 onClick처럼 함수의 형태로 객체를 전달한다.

 

📕 핸들링 함수 선언

	const App = () => {
	const handleClick = () => {
	alert("클릭했습니다.");
	}
	return (
	<div>
	<button onClick={handleClick}>클릭하세요</button>
	</div>
	);
	};

• 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법

 

📕 익명 함수로 처리

	const App = () => {
	return (
	<div>
	<button onClick={() => { alert('클릭했습니다.') }}>클릭하세요</button>
	</div>
	)
	}

• 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법

 

📝 이벤트 객체

	const App = () => {
	const handleChange = (event) => {
	console.log(event.target.value + "라고 입력하셨네요.");
	}
	return (
	<div>
	<input onChange={handleChange} />
	</div>
	);
	};

• DOM Element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달한다.
• 이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있다.
• 이벤트 형태(클릭, 키 입력 등)와 DOM 종류(button, form, input 등)에 따라 전달되는 이벤트 object의 내용도 다르니 유의할 것.

 

📕 DOM요소에만 이벤트 설정 가능

	// 이렇게 사용 못 한다.
	<EventPractice onLoad={ ()=> { console.log("test"); } }/>

• 직접 만든 리액트 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
• <div> <button> <p> <input> 등 DOM요소에만 이벤트를 사용할 수 있다.

 

📝 많이 쓰이는 DOM 이벤트

• onClick : Element를 클릭했을 때
• onChange : Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)
• onKeyDown, onKeyUp, onKeyPress : 키보드 입력이 일어났을 때
• onDoubleClick : Element를 더블 클릭했을 때
• onFocus : Element에 Focus 되었을 때
• onBlur : Element가 Focus를 잃었을 때
• onSubmit : Form Element에서 Submit 했을 때

 

📝 컴포넌트 내 이벤트 처리

📕 DOM 버튼 클릭

	const App = () => {
	const handleClick = () => {
	alert("클릭했습니다.");
	}
	return (
	<div>
	<button onClick={handleClick}>클릭하세요</button>
	</div>
	);
	};

 

📕 DOM Input 값을 State에 저장하기

	const App = () => {
	const [inputValue, setInputValue] = useState("defaultValue");
	const handleChange = (event) => {
	setInputValue(event.target.value);
	}
	return (
	<div>
	<input onChange={hadleChange} defaultValue={inputValue} />
	<br />
	입력한 값은: {inputValue}
	</div>
	);
	};

• event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.
• 현재 event의 target은 input element이므로 입력된 value를 가져와 setState를 하는 모습이다.

 

📝 여러 Input 동시에 처리하기, 한 개의 이벤트 핸들러를 여러 Element에 재사용하기 :: object의 key를 동적으로 할당

	const App = () => {
	const [user, setUser] = useState({
	name; "철수",
	school: "한국대학교"
	});
	const handleChange = (event) => {
	const { name, value } = event.target;
	// 방법 1
	// const newUser = { ...user };
	// newUser[name] = value;
	// setUser(newUser);
	// 방법 2
	setUser((current) => {
	const newUser = {...current};
	newUser[name] = value;
	return newUser;
	})
	};
	return (
	<div>
	<input name="name" onChange={handleChange} value={user.name} />
	<br />
	<input name="school" onChange={handleChange} value={user.school} />
	<p>
	{user.name}님은 {user.school}에
	재학중입니다.
	</p>
	</div>
	);
	};

• State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 input을 state로 관리하는 방법이 있다.
• target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영한다.

 

📝 컴포넌트 간 이벤트 전달하기

	// 자식
	const MyForm = ({ onChange }) => {
	return (
	<div>
	<span>이름: </span>
	<input onChange={onChange} />
	</div>
	)
	}

	// 부모
	const App = () => {
	const [username, setUsername] = useState('')
	return (
	<div>
	<h1>{username}님 환영합니다.</h1>
	<MyForm onChange={(event) => { setUsername(event.target.value) } }/>
	</div>
	)
	}

• 사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우 예시와 같이 이벤트를 Props로 전달하여 처리할 수 있다.

 

📝 커스텀 이벤트

	const SOS = ({onSOS}) => {
	const [count, setCount] = useState(0);
	const handleClick = () => {
	if(count >= 2) {
	onSOS();
	}
	setCount(count + 1);
	}
	return <button onClick={handleClick}>세 번 누르면 긴급호출({count})</button>
	}

	const App = () => {
	return (
	<div>
	<SOS onSOS={() => { alert("긴급사태!"); }} />
	</div>
	);
	};

• 단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.

 

📝 이벤트 명명법

	const App = () => {
	const handleClick = () => {
	alert("클릭했습니다.");
	}
	return (
	<div>
	<button onClick={handleClick}>클릭하세요</button>
	</div>
	);
	};

• 직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있다.
• 그러나 보통은 코드를 읽을 때 쉽고 빠르게 이해할 수 있도록 on + 동사 또는 on + 명사 + 동사 형태로 작성한다.
• 예시: onClick, onButtonClick, onInputChange
• 핸들링 함수의 경우 마찬가지로 handle + 동사 또는 handle + 명사 + 동사의 형태로 작성하며, handle 대신 이벤트명과 동일한 on을 앞에 붙여도 무방하다.

 

 

 

ref : https://lakelouise.tistory.com/261

[React] 리액트에서 이벤트를 다루는 방법