이벤트 핸들링
리액트의 이벤트 시스템
HTML에서의 이벤트
- eventHTML.html
<!DOCTYPE html>
<html>
<head>
<title>HTML에서의 이벤트</title>
</head>
<body>
<button onclick="alert('안녕하세요')">
클릭해보세요!
</button>
</body>
</html>리액트에서의 이벤트
- 이벤트를 사용할 때 주의사항
- 이벤트 이름은 카멜 표기법으로 작성
- onClick, onKeyUp 등
- 이벤트의 값으로 함수 형태를 전달
- 실제 자바스크립트 코드를 전달하지 않음
- DOM 요소에만 이벤트를 설정할 수 있음
- div, button, input, form 등에만 이벤트 설정 가능
- 직접 만든 컴포넌트에는 이벤트 설정 불가능
- 이벤트 이름은 카멜 표기법으로 작성
- 자주 쓰이는 이벤트
| 이벤트 이름 | 이벤트 호출 시점 | JSX DOM 이벤트 프로퍼티 |
|---|---|---|
| click | 엘리먼트의 마우스나 키보드가 클릭될 때 | onClick |
| submit | 폼의 데이터가 전송될 때 | onSubmit |
| mousemove | 엘리먼트 위에서 마우스 커서가 움직일 때 | onMouseMove |
| mouseover | 엘리먼트 영역 위로 마우스 커서가 돌아다닐 때 | onMouseOver |
| mouseout | 엘리먼트 위에 있던 마우스 커서가 영역을 떠나갈 때 | onMouseOut |
| keydown | 키보드 버튼이 눌렸을 때 | onKeyDown |
| keypress | 키보드 버튼 입력이 완료되었을 때 | onKeyPress |
이벤트에 매개변수 전달하기
onClick 이벤트에 매개변수 전달하기
- 다음과 같이 전달하면 에러 발생
- 익명함수를 통해 매개변수를 전달해야 함
-
function 함수 이용
<button onClick={function(){changeFont('100px')}}>글자크기변경</button> -
화살표 함수 이용
<button onClick={() => {changeFont('100px')}}>글자크기변경</button>
-
onChange 이벤트
- EventOnChange.js
import React, { useState } from 'react';
function EventOnChange(){
const [message, setMessage] = useState('onChange 이벤트')
function printConsole(e){
console.log(e.target.value);
}
function onChange(e){
setMessage(e.target.value);
}
return (
<div>
<h1>{message}</h1>
<input type="text" name="msg1" placeholder="내용을 입력하세요"
onChange={printConsole}/>
<input type="text" name="msg2" placeholder="내용을 입력하세요"
onChange={onChange}/>
</div>
);
};
export default EventOnChange;- EventOnChange.js
import React, { useState } from 'react';
function EventOnChange(){
const [message, setMessage] = useState('onChange 이벤트');
return (
<div>
<h1>{message}</h1>
<input type="text" name="msg"
placeholder="내용을 입력하세요"
onChange={(e)=>{console.log(e.target.value)}}
/>
</div>
);
};
export default EventOnChange;- EventOnChange.js 수정
import React, { useState } from 'react';
function EventOnChange(){
const [message, setMessage] = useState('onChange 이벤트');
return (
<div>
<h1>{message}</h1>
<input type="text" name="msg"
placeholder="내용을 입력하세요"
onChange={(e)=>{setMessage(e.target.value)}}
/>
</div>
);
};
export default EventOnChange;이미지 추가하기
내부 이미지 파일 추가하기
- src 폴더 내부의 이미지 파일 추가
-
import 사용
import 사용할_변수명 from '이미지_파일_경로' -
require 사용
require('이미지_파일_경로')
-
외부 이미지 파일 추가하기
- public 디렉터리 내부 이미지 추가
- 이미지는 주로 public 폴더 안에다 넣는다
<img src="/images/jjambbong.png">- 외부 서버의 이미지 추가
<img src='URL'>새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅
