4단원. Event Rerendering
웹 브라우저에서 DOM 요소들과 상호작용하는 것
< event 주의사항 >
1. 이벤트 이름은 카멜 표기법 사용
onClick
2. 이벤트 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달
화살표 함수 () => {}
렌더링 부분 외부에 미리 만들어서 전달
3. DOM 요소에만 이벤트 설정 가능
{ /\* (...) \*/ }
1. onChange event 설정
e 객체]
SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체
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.persist() 함수]
만약 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출
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;2. State에 Input 값 담기
생성자 메서드인 constructor에서 state 초깃값을 설정하고, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트하기 -> input의 value 값을 state에 있는 값으로 설정하기
- 이벤트 처리 시 렌더링을 하는 동시에 함수가 만들어서 전달
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
message: ''
}
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={
(e) => {
this.setState({
message: e.target.value
})
}
}
/>
</div>
);
}
}
export default EventPractice;3. Property Intalizer Syntax
바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의
- constructio() 없이도 바로 프로퍼티에 값 할당 가능
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
message: ''
}
handleChange = (e) => {
this.setState({
message: e.target.value
});
}
handleClick = () => {
alert(this.state.message);
this.setState({
message: ''
});
}
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;4. Event 객체 사용하기
input이 여러 개일 경우 event 객체를 이용해서 state 설정하기
- key[]
[] 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됨
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
username: '',
message: ''
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick = () => {
alert(this.state.username + ': ' + this.state.message);
this.setState({
username: '',
message: ''
});
}
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;5. onKeyPress 이벤트 핸들링
KeyPress 이벤트 처리
함수형 class형]
- e.target.name 활용
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
username: '',
message: ''
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick = () => {
alert(this.state.username + ': ' + this.state.message);
this.setState({
username: '',
message: ''
});
}
handleKeyPress = (e) => {
if(e.key === 'Enter') {
this.handleClick();
}
}
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;
함수형 컴포넌트]
- e.target.name 대신 onChange 관련 함수 두 개를 따로 만들기
import React, { useState } from 'react';
const EventPractice = () => {
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 (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={username}
onChange={onChangeUsername}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={message}
onChange={onChangeMessage}
onKeyPress={onKeyPress}
/>
<button onClick={onClick}>확인</button>
</div>
);
};
export default EventPractice;
5단원. Ref: Dom에 이름달기
JavaScript 또는 HTML 속성으로 DOM 요소를 특정할 수 있는 고유 이름을 부여하는 것
→ 이름을 통해 특정 요소를 제어하거나 접근할 수 있게 함
1. DOM
- DOM 을 사용해야 하는 이유
특정 input에 포커스 주기/ 스크롤 조작하기 Canvas 요소에 그림 그리기
- 특정 요소를 찾고, 클릭과 입력 등의 event를 바인딩
- 대표적인 이름 달기 방식]
더보기
| id | 문서 내에서 유일한 식별자 | |
|---|---|---|
| class | 여러 요소에 동일하게 지정 가능 (그룹화) |
|
| name | 주로 form 요소 식별에 사용 | |
| data-* | 커스텀 속성으로 정보 부여 |
|
| 변수에 저장 | JS에서 특정 DOM 요소를 변수로 명명 | let box = document.getElementById("myBox"); |
2. REF
ref는 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근하기 위한 React의 기능
- src 디렉터리 안에 ValidationSample.css와 ValidationSample.js 파일
import React, { Component } from 'react';
import './ValidationSample.css';
class ValidationSample extends Component {
state = {
password: '',
clicked: false,
validated: false
}
handleChange = (e) => {
this.setState({
password: e.target.value
});
}
handleButtonClick => () => {
this.setState({
clicked: true,
validated: this.state.password === '0000'
})
}
render() {
return (
<div>
<input
type="password"
value={this.state.password}
onChange={this.handleChange}
className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
/>
<button onClick={this.handleButtonClick}>검증하기</button>
</div>
);
}
}
export default ValidationSample;- input에서 onChange event 발생
=> handleChange를 호출하여 state의 password 값 업데이트
- button에서는 onClick event 발생
=> handleButtonClick을 호출하여 clicked 값을 true로 설정, validated 값을 검증 결과
- input의 className 값은 버튼을 누르기 전에 비어있는 문자열을 전달하며, 버튼을 누른 후에는 검증 결과에 따라 success 값 또는 failure 값을 설정
3. 콜백 함수를 통한 ref 설정
parameter가 ref를 콜백 함수에게 줌
- this.input = input 요소의 DOM
콜백함수]
<input ref={(ref) => {this.input=ref}} />4. createRef를 통한 ref 설정
createRef]
해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어줌
설정 후 ref를 설정해 준 DOM에 접근하려면 this.input.current를 조회하면 됨
import React, { Component } from 'react';
class RefSample extends Component {
input = React.createRef();
handleFocus = () => {
this.input.current.focus();
}
render() {
return (
<div>
<input ref={this.input} />
</div>
);
}
}
export default RefSample;5. Component에 Ref 달기
component 내부에 있는 DOM을 component 외부에서 사용할때 사용
- component file 만든 후 JSX 인라인 스타일링 문법으로 스크롤 박스 생성 -> 최상위 DOM에 ref 달아주기
기본]
import React, { Component } from 'react';
class ScrollBox extends Component {
render() {
const style = {
border: '1px solid black',
height: '300px',
width: '300px',
overflow: 'auto',
position: 'relative'
};
const innerStyle = {
width: '100%',
height: '650px',
background: 'linear-gradient(white, black)'
}
return (
<div
style={style}
ref={(ref) => {this.box=ref}}>
<div style={innerStyle}/>
</div>
);
}
}
export default ScrollBox;
메서드 생성]
- scrollTop: 세로 스크롤바 위치
- scrollHeight: 스크롤이 있는 박스 안의 div 높이
- clientHeight: 스크롤이 있는 박스의 높이
import React, { Component } from 'react';
class ScrollBox extends Component {
scrollToBottom = () => {
const { scrollHeight, clientHeight } = this.box;
/* 앞 코드에는 비구조화 할당 문법을 사용했습니다.
다음 코드와 같은 의미입니다.
const scrollHeight = this.box.scrollHeight;
const clientHeight = this.box.cliengHeight;
*/
this.box.scrollTop = scrollHeight - clientHeight;
}
render() {
(...)
}
export default ScrollBox;'FrontEnd > React' 카테고리의 다른 글
| [ React ] 컴포넌트 스타일링 (0) | 2025.04.08 |
|---|---|
| [ React ] Hook (1) | 2025.04.07 |
| [ React ] Component Recycle Method (0) | 2025.04.06 |
| [ React ] JSX Component & Props & State (1) | 2025.04.02 |
| [ React ] JSX (0) | 2025.04.01 |