리액트에서 이벤트 핸들링은 일반 HTML과 비슷하게 처리됩니다.
이벤트 핸들러는 JSX 요소의 props로 전달되며, 함수의 형태로 작성됩니다.
- 이벤트 핸들러 함수 정의
- 이벤트 핸들러 함수를 이벤트에 연결
- 이벤트 핸들러 함수에서 상태 업데이트
import React, {useState} from "react";
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage("안녕하세요!!");
const onClickLeave = () => setMessage("안녕히 가세요!!");
const [val, setColor] = useState("black");
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{color: val}}>{message}</h1>
<button style={{color:'red'}} onClick={()=>setColor('red')}>빨간색</button>
<button style={{color:'green'}} onClick={()=>setColor('green')}>초록색</button>
<button style={{color:'blue'}} onClick={()=>setColor('blue')}>파란색</button>
</div>
);
};
export default Say;이벤트를 사용할 때 주의 사항
이벤트 이름은 카멜 표기법으로 작성 합니다.
HTML의 onclick은 리액트에서는 onClick으로 작성해야 합니다. 또 onkeyup은 onKeyUp으로 작성 합니다.
이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다.
HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 만들어 전달 합니다. 화살표 함수 문법으로 함수를 만들어 전달해도 되고 렌더링 외부에 함수를 만들어 전달해도 됩니다.
DOM 요소에만 이벤트 설정 할 수 있습니다.
div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정 할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없습니다.
HTML
<button onclick="activateLasers()">
Activate Lasers
</button>REACT
<button onClick={activateLasers}> Activate Lasers
</button>진행 순서
onChange 이벤트 핸들링하기
import { useState } from "react";
const EventPratice = () => {
const [message, setMessage] = useState('안녕하세요');
const changeMsg = (e) => {
setMessage(e.target.value);
}
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="아무거나 입력 하세요" onChange={changeMsg} />
<h2>입력 받은 메시지 : {message}</h2>
</div>
);
}
export default EventPratice;컴포넌트 생성 및 불러오기
입력 제어
import { useState } from "react";
const EventHander = () => {
const [userName, setUserName] = useState("");
const [message, setMessage] = useState("");
const onChangeUserName = e => setUserName(e.target.value);
const onChangeMessage = e => setMessage(e.target.value);
const onClick = () => {
alert(userName + " : " + message);
setUserName("");
setMessage("");
}
const onKeyPress = e => {
if(e.key === "Enter") onClick();
}
return(
<>
<h1>이벤트 연습</h1>
<input type="text" placeholder="사용자명" value={userName} onChange={onChangeUserName}/>
<input type="text" placeholder="아무거나 입력" value={message}
onChange={onChangeMessage} onKeyDown={onKeyPress}/>
<button onClick={onClick}>확인</button>
</>
);
}
export default EventHander;select, option
option 요소는 select 요소의 자식 요소로 포함됩니다. 각 option 요소는 사용자가 선택할 수 있는 각각의 옵션을 나타내며, value 속성을 사용하여 해당 옵션의 값을 정의할 수 있습니다.
리액트에서는 select 요소의 값이 변경될 때마다 onChange 이벤트 핸들러를 호출하여 선택된 옵션의 값을 처리할 수 있습니다.
import {useState} from "react";
const FruitSelect = () => {
const [value, setValue] = useState('grape');
const handleChange = (event) => {
setValue(event.target.value);
}
const handleSubmit = (event) => {
alert("선택한 과일 : " + value);
event.preventDefault(); // 창이 새로고침되는 걸 막음
}
return (
<form onSubmit={handleSubmit}>
<label>
과일을 선택하세요.
<select value={value} onChange={handleChange}>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grape">포도</option>
<option value="watermelon">수박</option>
</select>
</label>
<button type="submit">제출</button>
</form>
);
}
export default FruitSelect;라디오박스
- 라디오 박스 이벤트 처리는
input요소의type속성을radio로 설정하여 처리 합니다. - 라디오 박스는 여러 개의 옵션 중에서 하나의 값을 선택하는데 사용 됩니다.
- 라디오 박스에
name속성과value속성을 설정합니다. - 라디오 박스에
checked속성을 설정하여 초기 선택 값을 설정할 수 있습니다. - 라디오 박스에
onChange이벤트 핸들러 함수를 지정하여 선택 값을 처리합니다.
import React, { useState } from 'react';
function RadioButton() {
const [selectedValue, setSelectedValue] = useState('apple');
function handleChange(event) {
setSelectedValue(event.target.value);
}
return (
<div>
<label htmlFor="apple">
<input type="radio" name="fruits" id="apple" value="apple" onChange={handleChange}/>사과
</label>
<br />
<label htmlFor="orange">
<input type="radio" name="fruits" id="orange" value="orange" onChange={handleChange}/>오렌지
</label>
<br />
<label htmlFor="strawberry">
<input type="radio" name="fruits" id="strawberry" value="strawberry" onChange={handleChange} />딸기
</label>
<br />
<p>Selected value: {selectedValue}</p>
</div>
);
}
export default RadioButton;Table로 구현된 리스트에 이벤트 넣기
import React from "react";
import "./App.css";
const Table = () => {
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Tom', age: 28 }
];
function handleTableRowClick(item) {
console.log(item);
}
return(
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{data.map(item => (
<tr key={item.id} onClick={() => handleTableRowClick(item)}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Table; table{
border-collapse:collapse;
}
th, td{
border:1px solid #ccc;
}실제 화면에 그려지는 형태로 변경
import { useState, useEffect} from "react";
import "./App.css";
// 배열로 구성된 객체를 전달받아 map으로 화면에 표시하고, 표시된 화면 영역에 이벤트 연결하기
const TableMap = () => {
const data = [
{id : 100, name : "카즈하", age : 21},
{id : 200, name : "유나", age : 21},
{id : 300, name : "안유진", age : 21}
];
const [mapData, setMapData] = useState("");
useEffect(() => {
setMapData(data);
},[]);
const tableClickEvent = (item) => {
console.log(item);
}
return(
<table>
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
{mapData && mapData.map(item => (
<tr key={item.id} onClick={()=>tableClickEvent(item)}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>
);
}
export default TableMap;
FE 개발자🌱