event : 웹 브라우저에서 DOM 요소와 상호작용
리액트 Event 시스템
주의 사항
- camelCase로 이벤트 이름 작성
- 이벤트 실행 시 js 코드가 아닌 함수 형태의 값/객체 전달
- DOM 요소에만 이벤트 설정 가능
div,button,input,form,span등 DOM 요소에 event 설정 가능
직접 만든 자체적 컴포넌트에는 이벤트 설정 불가능
<MyComponent onClick={doSomething}/>
:doSomething함수 실행 X, 그냥 이름이OnClick인 것을 전달 받음
전달 받은 props를 컨포넌트 내부 DOM 이벤트로 설정 가능
이벤트 종류
React Event Handling Doc
https://reactjs.org/docs/events.html
이벤트 핸들링 익히기
1. 컴포넌트 생성
src/EventPractice.js 생성해 컴포넌트 초기 코드 작성
import React,{Component} from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<h1>이벤트 연습</h1>
</div>
)
}
}
export default EventPractice;2. 컴포넌트 불러오기
App.js에서 EventPractice.js 파일 import 해서 랜더링
import './App.css';
import React,{Component} from "react";
import EventPractice from './EventPractice';
/*EventPractice 파일에서 EventPractice라는 이름으로 Component 불러오기 */
class App extends Component{
render(){
return (
<EventPractice/>
)
}
}
export default App;3. 랜더링 결과
onChange 이벤트 핸드링
1. onChange 이벤트 설정
흐름
1. EventPractice 컴포넌트에 다음의 코드 작성
input 요소 랜더링 코드
onChange 이벤트 설정 코드
import React,{Component} from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하시오"
onChange={
(e)=>{
console.log(e);
}
}
/>
</div>
)
}
}
export default EventPractice;e:
이벤트 객체로 SyntheticEvent임
네이티브 이벤트와 인터페이스가 같음
-> 바닐라 js에서 HTML 이벤트 핸들링과 동일
console 결과 :
- onChange 이벤트 발생시,
e.target.value이용해 변하는 input값 콘솔 출력 코드
onChange={
(e)=>{
console.log(e.target.value);
}
}console 결과 :
2. state에 input 값 담기
흐름
1. constructor인 생성자 메서드에 state 초깃값 설정
2. 이벤트 핸들링 함수 내부에서 this.setState 메서드 호출
3. state 업데이트
4. input의 value를 state에 할당된 값으로 설정
import React,{Component} from 'react';
class EventPractice extends Component{
//1. state 초깃값 설정
state={
msg : ""
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하시오"
value={this.state.msg}
onChange={ //2.이벤트 핸들링 함수 내부에서 this.setState 메서드 호출
(e)=>{ //3. state 업데이트
this.setState({
msg : e.target.value
//4.input의 value를 state에 할당된 값으로 설정
})
}
}
/>
</div>
)
}
}
export default EventPractice;3. 버튼 누를 때 comment 값 공백으로 설정
입력한 값이 state에 할당되었는지, input에서 그 값 반영하는지 확인
흐름
1.input요소 아래에button생성
2. click 이벤트 발생시comment값 메시지 박스로 띄우기
3. comment 값을 공백으로 설정
(...)
{/*1. input 요소 아래 버튼 생성*/}
<button onClick={
()=>{
alert(this.state.msg);
//2. click 이벤트 발생 시 alert 사용해 comment 값 메시지 박스 띄우기
this.setState({
msg:""
});
//3. comment 값 공백으로 설정
}
}>확인</button>
(...)임의 메서드 만들기
함수 미리 만들어서 전달 : 가독성 좋음
1. 기본 공식
흐름
1. 컴포넌트 생성자 메소드constructor
: 각 메서드를 this와 바인딩 -> 메소드에서 this 사용 가능하도록!
2.handleClick과handleChange함수 작성
3.onChange와onClick이벤트에 함수 전달
import React,{Component} from 'react';
class EventPractice extends Component{
//1-1. 컴포넌트 생성자 메소드
constructor(props){
super(props);
//msg 초기값 설정
this.state={msg:""}
//1-2. 각 메서드를 this와 binding -> this에서 사용 가능하도록
this.handleClick=this.handleClick.bind(this);
this.handleChange=this.handleChange.bind(this);
}
//2-1. handleChange 함수 작성
handleChange(e){
this.setState({
msg : e.target.value //4.input의 value를 state에 할당된 값으로 설정
})
}
//2-2. handleClick 함수 작성
handleClick(){
alert(this.state.msg);
this.setState({
msg:"" //comment 값 공백으로 설정
});
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하시오"
value={this.state.msg}
//3-1. onChange 이벤트에 handleChange 함수 전달
onChange={this.handleChange}
/>
{/*input 요소 아래 버튼 생성*/ }
{/*3-2. onClick 이벤트에 handleClick 함수 전달*/}
<button onClick={this.handleClick}>확인</button>
</div>
)
}
}
export default EventPractice;2. Property Initializer Syntax 사용한 메서드 작성
위의 1. 기본 공식 처럼 작업 시 매번 constructor 수정해야 하는 번거로움 발생
화살표 함수 형태로 메서드 정의 : 더 편리함
state={ //1. msg 초기값 설정
msg:""
}
//2-1. handleChange 화살표 형태 함수
handleChange=(e)=>{
this.setState({
msg : e.target.value
//input의 value를 state에 할당된 값으로 설정
})
}
//2-2. handleClick 화살표 형태 함수
handleClick=()=>{
alert(this.state.msg);
this.setState({
msg:""
//comment 값 공백으로 설정
});
}여러개 input 핸들링
event 객체인 e.target.name 이용
태그의 name 속성 이용
import React,{Component} from 'react';
class EventPractice extends Component{
state={ //1. msg와 username 초기값 설정
msg:"",
username:""
}
//2-1. handleChange 화살표 형태 함수
handleChange=(e)=>{
this.setState({
[e.target.name] : e.target.value
//input의 name에 맞는 value값을 state의 값으로 설정
})
}
//2-2. handleClick 화살표 형태 함수
handleClick=()=>{
alert(this.state.username+ " : "+ this.state.msg );
this.setState({
msg:"" ,//comment 값 공백으로 설정
username:""
});
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username" /*input의 name 값 -> setState에 전달됨*/
placeholder="유저명"
value={this.state.username}
//3-1. onChange 이벤트에 handleChange 함수 전달
onChange={this.handleChange}
/>
<input
type="text"
name="msg" /*input의 name 값 -> setState에 전달됨*/
placeholder="아무거나 입력하시오"
value={this.state.msg}
//3-1. onChange 이벤트에 handleChange 함수 전달
onChange={this.handleChange}
/>
{/*input 요소 아래 버튼 생성*/ }
{/*3-2. onClick 이벤트에 handleClick 함수 전달*/}
<button onClick={this.handleClick}>확인</button>
</div>
)
}
}
export default EventPractice;onKeyPress 이벤트 핸들링
키 눌렀을 때 이벤트 발생
e.key, onKeyPress, === 이용
1. enter 키 눌렀을 때 handleClick 메서드 호출 코드
import React,{Component} from 'react';
class EventPractice extends Component{
state={ //1. msg와 username 초기값 설정
msg:"",
username:""
}
//2-1. handleChange 화살표 형태 함수
handleChange=(e)=>{
this.setState({
[e.target.name] : e.target.value
//input의 name에 맞는 value값을 state의 값으로 설정
})
}
//2-2. handleClick 화살표 형태 함수
handleClick=()=>{
alert(this.state.username+ " : "+ this.state.msg );
this.setState({
msg:"" ,//comment 값 공백으로 설정
username:""
});
}
//2-3. handleKey 함수 작성 : Enter 키 누르면 handleClick 함수 실행
handleKeyPress=(e)=>{
if(e.key==="Enter"){
this.handleClick();
}
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username" /*input의 name 값 -> setState에 전달됨*/
placeholder="유저명"
value={this.state.username}
//3-1. onChange 이벤트에 handleChange 함수 전달
onChange={this.handleChange}
//3-2. onKeyPress 이벤트에 handleKeyPress 함수 전달
onKeyPress={this.handleKeyPress}
/>
<input
type="text"
name="msg" /*input의 name 값 -> setState에 전달됨*/
placeholder="아무거나 입력하시오"
value={this.state.msg}
//3-1. onChange 이벤트에 handleChange 함수 전달
onChange={this.handleChange}
//3-2. onKeyPress 이벤트에 handleKeyPress 함수 전달
onKeyPress={this.handleKeyPress}
/>
{/*input 요소 아래 버튼 생성*/ }
{/*3-3. onClick 이벤트에 handleClick 함수 전달*/}
<button onClick={this.handleClick}>확인</button>
</div>
)
}
}
export default EventPractice;
'''
