더보기
이미 나도 모르게 쓰고 있었다. 생각보다 별 거 없으니 쫄지 말 것.
Synthetic Event는 이벤트가 너무 많아서 찾아보면서 사용하고, 익혀야 할 것 같다.
Event Handling
html Event : <button onclick="activeEvent();">
react event : <button onClick={activeEvent}>
- 괄호x
- 카멜케이스
- 함수 이름 자체 전달. 기본 dom 요소에만 이벤트 설정 가능
- synthetic Event : 웹브라우저에서 사용하는 기본 이벤트를 감싸는 새로운 기능, =리액트 고유 이벤트 객체
Synthetic Event
이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤드 래퍼 SyntheticEvent 객체를 전달 받는다.
=리액트 고유 이벤트 객체
import { useState } from 'react';
function SyntheticEvent2() {
const [text, setText] = useState('');
function printInputValue(e) {
console.log(e.target.value);
setText(e.target.value);
}
return (
<div>
{/* onChange 사용 */}
<input type="text" placeholder="아무거나 입력!" onChange={printInputValue}/>
<h3>{text}</h3>
</div>
);
}
export default SyntheticEvent2;
클래스 컴포넌트 코드
- this 사용 (=state, props 동일)
import React from 'react';
class Handler extends React.Component {
constructor() {
super();
//state 오브젝트
this.state = {
text: 'Feel',
};
}
good = () => {
// setState에 함수 넣어서 값 변경
this.setState({ text: 'Good' });
};
render() {
// 객체 구조 분해 할당
const { text } = this.state;
return (
<>
<h3>{text}</h3>
<button onClick={this.good}>👍</button>
// 화살표 함수 사용
<button onClick={() => this.setState({ text: 'Bad' })}>👎</button>
</>
);
}
}
export default Handler;
함수 컴포넌트 코드
- 함수형 컴포넌트에서의 이벤트
- 함수에 인자가 있는 경우
- 함수에 인자가 없는 경우
import { useState } from 'react';
const Counter = () => {
const [number, setNumber] = useState(0);
const increase = () => {
setNumber(number + 1);
};
const alertMsg =(msg)=>{
alert(`${msg} 현재 숫자는 ${number}입니다!`);
}
const consoleMsg = (e, msg)=>{
console.log(e.target);
console.log(`${msg} 현재 숫자는 ${number}입니다`)
}
return (
<>
<div>숫자 카운터</div>
<h1>{number}</h1>
{/* 함수형 컴포넌트에서 이벤트 */}
{/* 1. 인자가 없는 경우, 함수 이름만 전달 */}
<button onClick={increase}>더하기</button>
{/* 2. 인자가 있는 경우 : 함수를 익명 화살표 함수로 감싸서 처리 */}
<button onClick={()=> alertMsg('hello')}>alert 띄우기</button>
{/* 3. */}
<button onClick={(e)=> consoleMsg(e,'hello')}>console 출력</button>
</>
);
};
export default Counter;
'[Study] FE > React' 카테고리의 다른 글
[React] 타이머 컴포넌트 만들기 (0) | 2023.05.18 |
---|---|
React와 Node.js 로 만든 Todo List Mini Project 회고록 (0) | 2023.05.06 |
[포스코x코딩온] React 04 Map () & filter() (0) | 2023.04.23 |
[포스코x코딩온] React 02 state & useState (0) | 2023.04.23 |
[포스코x코딩온] React 01 특징 및 설치 (0) | 2023.04.20 |