1. 이벤트(Event)
이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말한다.
- 이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다.
- 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다.
- 이벤트 핸들러에 ()를 붙이지 않는 이유는 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.
이벤트 종류
- React 공식문서에서 확인 가능하다.
마우스 이벤트
- onClick : 마우스를 클릭했을 때 발생
- onDoubleClick : 마우스를 더블 클릭했을 때 발생
- onMouseOver : 마우스를 요소 위로 올렸을 때 발생
- onMouseOut : 마우스를 요소 밖으로 옮겼을 때 발생
- onMouseEnter : 마우스가 요소 안으로 들어왔을 때 발생
- onMouseLeave : 마우스가 요소 밖으로 나갔을 때 발생
- onMouseDown : 마우스 버튼을 눌렀을 때 발생
- onMouseUp : 마우스 버튼을 뗐을 때 발생
- onMouseMove : 마우스를 움직였을 때 발생
- onContextMenu : 마우스 오른쪽 버튼을 클릭했을 때 발생
function MouseEvents() {
return (
<div>
{/* 클릭 이벤트 */}
<button
onClick={e => console.log('클릭!')}
onDoubleClick={e => console.log('더블 클릭!')}
>
클릭해보세요
</button>
{/* 마우스 오버/아웃 */}
<div
onMouseEnter={e => console.log('마우스 진입')}
onMouseLeave={e => console.log('마우스 나감')}
>
마우스를 올려보세요
</div>
{/* 마우스 이동 */}
<div
onMouseMove={e => {
console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
}}
>
마우스를 움직여보세요
</div>
</div>
);
}
키보드 이벤트
- onKeyDown : 키보드의 키를 눌렀을 때 발생
- onKeyPress : 키보드의 키를 눌렀을 때 발생
- onKeyUp : 키보드의 키를 뗐을 때 발생
function KeyboardEvents() {
return (
<input
type='text'
onKeyDown={e => console.log('키 다운:', e.key)}
onKeyUp={e => console.log('키 업:', e.key)}
onKeyPress={e => console.log('키 프레스:', e.key)}
placeholder='키보드를 눌러보세요'
/>
);
}
폼 이벤트
- onChange : input, textarea, select 요소의 값이 변경되었을 때 발생
- onSubmit : 폼을 제출했을 때 발생
- onReset : 폼을 초기화했을 때 발생
function FormEvents() {
const handleSubmit = e => {
e.preventDefault(); // 기본 동작 방지
console.log('폼 제출!');
};
return (
<form onSubmit={handleSubmit}>
{/* 입력 변경 */}
<input
onChange={e => console.log('값 변경:', e.target.value)}
onFocus={e => console.log('포커스!')}
onBlur={e => console.log('블러!')}
/>
{/* 체크박스 */}
<input
type='checkbox'
onChange={e => console.log('체크:', e.target.checked)}
/>
{/* 선택 */}
<select onChange={e => console.log('선택:', e.target.value)}>
<option value='1'>옵션 1</option>
<option value='2'>옵션 2</option>
</select>
<button type='submit'>제출</button>
</form>
);
}
기타 이벤트
- onScroll : 요소를 스크롤할 때 발생
- onWheel : 마우스 휠을 움직일 때 발생
- onCopy : 요소를 복사할 때 발생
- onCut : 요소를 잘라낼 때 발생
- onPaste : 요소에 붙여넣을 때 발생
- onDrag : 요소를 드래그할 때 발생
- onDragStart : 요소를 드래그하기 시작할 때 발생
- onDragEnd : 요소를 드래그하기 끝낼 때 발생
- onDragEnter : 드래그한 요소를 들어갈 때 발생
- onDragLeave : 드래그한 요소를 나갈 때 발생
- onDragOver : 드래그한 요소 위로 올라갈 때 발생
- onDrop : 드래그한 요소를 놓을 때 발생
function OtherEvents() {
return (
<div
onScroll={e => console.log('스크롤')}
onWheel={e => console.log('휠')}
onCopy={e => console.log('복사')}
onCut={e => console.log('잘라내기')}
onPaste={e => console.log('붙여넣기')}
onDrag={e => console.log('드래그')}
onDragStart={e => console.log('드래그 시작')}
onDragEnd={e => console.log('드래그 끝')}
onDragEnter={e => console.log('드래그 진입')}
onDragLeave={e => console.log('드래그 나감')}
onDragOver={e => console.log('드래그 위')}
onDrop={e => console.log('드래그 놓기')}
>
드래그해보세요
</div>
);
}
이벤트 객체
- 이벤트 핸들러의 첫 번째 파라미터로 이벤트 객체를 받을 수 있다.
- 이벤트 객체에는 이벤트가 발생한 DOM 요소에 대한 정보와 이벤트에 대한 정보가 들어있다.
import React from 'react';
function App() {
const handleClick = event => {
console.log(event); // 이벤트 객체 (MouseEvent)
console.log(event.target); // 이벤트가 발생한 DOM 요소 (button)
console.log(event.type); // 이벤트 타입 (click)
};
return (
// onClick 이벤트 핸들러에 이벤트 객체를 전달받을 수 있다.
<div className='App'>
<button onClick={handleClick}>버튼</button>
</div>
);
}
export default App;
이벤트 핸들러 등록
- 이벤트 핸들러를 등록할 때는 함수를 호출하는 것이 아니라 함수를 등록하는 것이다.
import React from 'react';
function App() {
const handleClick = () => {
alert('버튼 클릭');
};
return (
// onClick 이벤트 핸들러에 ()를 붙이지 않는 이유는
// 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.
<div className='App'>
<button onClick={handleClick}>버튼</button>
</div>
);
}
export default App;
- 이벤트 핸들러에 전달하는 함수에 ()를 붙이면 이벤트 핸들러가 등록되는 것이 아니라 함수가 호출되면서 함수의 반환값이 이벤트 핸들러로 등록된다.
import React from 'react';
function App() {
const handleClick = () => {
alert('버튼 클릭');
};
return (
// onClick 이벤트 핸들러에 ()를 붙이면 이벤트 핸들러가 등록되는 것이 아니라
// 함수가 호출되면서 함수의 반환값이 이벤트 핸들러로 등록된다.
// 따라서 아래 코드는 버튼을 클릭하면 즉시 alert 창이 뜬다.
<div className='App'>
<button onClick={handleClick()}>버튼</button>
</div>
);
}
export default App;
이벤트 기본 예제
import React from 'react';
function App() {
// 버튼 클릭시 Alert 창 띄우기
const handleClick = () => {
alert('버튼 클릭');
};
// input 태그에 텍스트 입력시 .text 요소에 텍스트 출력하기
// event = onChange 이벤트가 발생
const handleChange = event => {
// event.target = 이벤트가 발생한 요소
document.querySelector('.text').innerText = event.target.value;
};
// 마우스를 올렸을 때 this 요소의 배경색을 빨간색으로 변경하기
const handleMouseOver = event => {
event.target.style.backgroundColor = 'red';
};
return (
// 아래 코드는 JSX 문법으로 함수를 호출할 때 ()를 붙이지 않는 이유는
// 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.
<div className='App'>
<h1>클릭 이벤트</h1>
<button onClick={handleClick}>버튼</button>
<h1>입력 이벤트</h1>
<input
type='text'
onChange={handleChange}
/>
<strong className='text'></strong>
<h1>마우스오버 이벤트</h1>
<div
className='change-red'
onMouseOver={handleMouseOver}
>
마우스를 올려주세요.
</div>
</div>
);
}
export default App;
- 위 코드에 State(상태)를 사용하여 코드를 개선해보자.
// useState를 불러온다.
import React, { useState } from 'react';
function App() {
// 클릭 이벤트 처리와 상태 관리를 위한 변수
// count = 상태, setCount = 상태를 변경하는 함수
// useState(0) = count의 초기값을 0으로 설정
const [count, setCount] = useState(0);
// 버튼 클릭 시 count 상태 업데이트
const handleButtonClick = () => {
setCount(count + 1); // count 상태를 1 증가
};
// 입력 이벤트 처리를 위한 변수
// inputValue = 상태, setInputValue = 상태를 변경하는 함수
// useState('') = inputValue의 초기값을 ''으로 설정
const [inputValue, setInputValue] = useState('');
// 입력 필드의 값이 변경될 때 inputValue 상태 업데이트
const handleInputChange = event => {
// event.target.value = 입력 필드의 값
setInputValue(event.target.value);
};
return (
// 삼항 연산자 : 조건 ? 참일 때 반환값 : 거짓일 때 반환값
<div className='App'>
<h1>클릭 이벤트 예제</h1>
<button onClick={handleButtonClick}>클릭하여 증가: {count}</button>
<h1>조건부 렌더링 예제</h1>
{count >= 5 ? <p>count가 5 이상입니다.</p> : <p>count가 5 미만입니다.</p>}
<hr />
<h1>입력 이벤트 예제</h1>
<input
type='text'
placeholder='입력하세요'
value={inputValue}
onChange={handleInputChange}
/>
<p>입력한 값: {inputValue}</p>
</div>
);
}
export default App;
'Front > React' 카테고리의 다른 글
Framer Motion - 리액트 라이브러리, 애니메이션 구현 (0) | 2023.11.04 |
---|---|
상태(State) - React 배우기 (0) | 2023.10.31 |
속성(Props, Properties) - React 배우기 (0) | 2023.10.29 |
React에서 GSAP 사용하기 (0) | 2023.10.27 |
리액트 ES6 문법 정리 (0) | 2023.10.27 |