Event
-웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미
✅이벤트 핸들링 방법
(1) 핸들링 함수 선언
별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법
const App = () => {
const handleClick = () => {
alert("클릭했습니다.");
}
return (
<div>
<button onClick={handleClick}>클릭하세요</button>
</div>
);
};(2) 익명 함수로 처리
이벤트를 할당하는 부분에서 익명함수 작성
const App = () => {
return (
<div>
<button onClick={() => { alert('클릭했습니다.') }
}>클릭하세요</button>
</div>
)
}✔️❗많이 쓰이는 DOM 이벤트
onClick: Element를 클릭했을 때
onChange: Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)
onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때
onDoubleClick: Element를 더블 클릭했을 때
onFocus: Element에 Focus되었을 때
onBlur: Element가 Focus를 잃었을 때
onSubmit: Form Element에서 Submit 했을 때
이벤트함수 이름➡️"on"+동사 or "on"+명사+동사
핸들링함수 이름➡️"handle"+동사 or "handle"+명사+동사
//event.target=>이벤트의 원인이 되는 element
const handleChange = (event) => {
setInputValue(event.target.value);
}//object의 키를 동적으로 할당함
const handleChange = (event) => {
const { name, value }
const newUser = { ...user };
newUser[name] = value;
setUser(newUser);
};Hook
컴포넌트에서 데이터를 관리(state)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용
-이름의 시작은 반드시 use로 시작
-최상의 level에서만 호출 가능
✔️State Hook VS Effect Hook
1. State Hook
const App = () => {
const [state이름, setState이름] = useState(초기값)
}-동적인 데이터를 관리
-state를 변경하기 위해 setState함수에 직접 입력 or 현재값을 매개변수로 받는 함수 전달- Effect Hook
const App = () => {
useEffect(EffectCallback, Deps?)
}
//Deps: 변경을 감지할 변수들의 집합(배열)
//EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수-함수 컴포넌트에서 side effect를 수행
==어떤 값이 변할때마다 내가 설정한 함수가 실행됨