eventHandling
- react의 component는 상태를 가지고, 상태의 변화에 따라 컴포넌트가 리 랜더링됨
- 즉, 리엑트 컴포넌트의 상태를 변경시키는 무언가가 있다.
- 그 무언거의 대부분이 바로 이벤트
- 즉, 리엑트 컴포넌트의 상태를 변경시키는 무언가가 있다.
- javaScript의 event와 약간차이는 있으나 비슷하다.
- react도 결국 javaScript다.
- JSX에선 카멜케이스로 구성된 속성에 이벤트 함수를 넣는다.
<button onClick={handleClick}>Button </buttonn>
- react의 이벤트에선 이벤트함수가 호출되면 인자로
SyntheticEvent객체가 전달됨- SyntheticEvent는 javascript의 event 객체를 래핑한 객체임.
- 거의 유사한 인터페이스를 가지고 있음
- 원본 이벤트 객체도 접근 가능
SyntheticEvent.nativeEvent
eventHandler함수를 만들때는 react lifecycle을 고려해야한다.
- 컴포넌트 내부에서 함수를 만들면 리랜더링 될때마다 새로 함수가 쓰여진다.
- 이게 필요한 순간도 있겠으나 아닌 순간도 있다.
- 새로 함수를 쓸 필요가 없다면 컴포넌트 외부에서 이벤트 핸들러 함수를 만들자.
- 또는 useCallback으로 감싸주면 리랜더링을 피할 수 있다.
import { useCallback } from "react";
// 컴포넌트 외부에 함수 선언
function handleClickOutOfComponent(e) {
console.log("click2", e);
}
function App() {
// 컴포넌트 내부의 함수
function handleClick(e) {
console.log("click1", e);
}
const handleChange = useCallback((e) => {
console.log("change", e.target.value);
}, []);
return (
<div>
<button onClick={handleClick}>Button1</button>
<button onClick={handleClickOutOfComponent}>Button2</button>
<div>
<input type="text" onChange={handleChange} />
</div>
</div>
);
}
export default App;
이벤트의 종류
Mouse event
- onClick : 마우스 클릭 (down + up )
- onMouseDown : 버튼 누를시
- onnMouseUp : 버튼 뗄시
- onMouseEnter : 요소 밖에서 안으로 마우스 커서가 들어감
- onMouseLeave : 요소 안에서 밖으로 마우스 커서가 나감
- onMouseMove : 요소 안에서 마우스 커서가 움직임
Keyboard event
- onKeyDown : 키를 눌렀을때 (물리적인 키에 반응)
- onKeyUp : 키를 떼었을때
- onKeyPress : 키를 눌러서 문자가 입력될때(눌린 문자에 반응함)
Focus, Form event
- Focus
- onFocus : 요소가 포커스 될때
- onBlur : 요소의 포커스가 사라질경우
- Form
- onChange : 요소의 값이 변경될때
그외
- 필요할때마자 찾아가면서 사용하도록하자.
Form 요소 컨트롤
- Form 요소를 컨트롤할때는 이벤트를 자주 사용한다.
Controlled Component
- 제어 컴포넌트 라고도 함.
- React에 의해 입력 요소 값이 제어되는 컴포넌트
import { useState } from 'react';
function TextArea() {
const [textAreaVal, setTextAreaVal] = useState('');
console.log('[TextArea] render', value);
return (
<textarea
value={textAreaVal}
onChange={(e) => {
setTextAreaVal(e.target.value);
}}
/>
);
}
export default TextArea;- 위 코드에서
textArea는value속성에 textAreaVal 스테이트 값을 넣어줌 - onChange 에서는 setTextAreaVal를 호출함
- 유저가 값을 입력하면 state에 유저의 입력이 반영 되면서 상태가 업데이트됨
장점
- 컴포넌트의 state 와 input value가 완전히 동일함(신뢰가능한 단일 출처)
- 다른 컴포넌트에 input value를 전달하거나 다른 이벤트 핸들러에서값을 재설정 할 수 있음
단점
- 값이 변경되는 매 순간 렌더링이 됨
- 컴포넌트의 영향 범위가 클수록 성능 저하됨
Uncontrolled Component
- Controlled Component와는 반대로 input value를 컴포넌트 State에 연결하지 않고 사용하는 컴포넌트
- 값은 dom을 통해 가져온다.
- ex: document.querySelector('#{id}').value
- useRef를 사용해 가져올 수 도 있다.
- useRef는 Hooks의 한 종류. 특정 요소의 레퍼런스를 직접 가져올때 사용
- 연결된 값이 변경되더라도 리랜더링이 되지 않는다.
import { useRef } from 'react';
function UncontrolledTextInput() {
const inputRef = useRef(); //1. useRef를 이용해 ref를 만든다.
console.log('[UncontrolledTextInput] render');
return (
<>
/* jsx에서 ref속성에 연결한다. */
<input ref={inputRef} type="text" id="input" />
<button
onClick={() => {
console.log(inputRef.current.value);
}}
>
Get value
</button>
</>
);
}
export default UncontrolledTextInput;반응형
'프로그래밍 > react 학습노트' 카테고리의 다른 글
| react 학습노트 | 3.Hooks (0) | 2025.04.20 |
|---|---|
| react 학습노트 | 2.Component (0) | 2025.04.11 |
| react 학습노트 | 1.JSX란? (0) | 2025.03.30 |