02 Hooks

01 이벤트 처리

이벤트 소개

이벤트란

이벤트 처리(핸들링) 방법

이벤트 객체

많이 쓰는 DOM 이벤트

• onClick: Element를 클릭했을 때
• onChange: Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)
• onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때
• onDoubleClick: Element를 더블 클릭했을 때
• onFocus: Element에 Focus되었을 때
• onBlur: Element가 Focus를 잃었을 때
• onSubmint: Form Element에서 Submit했을 때

컴포넌트 내 이벤트 처리

DOM 버튼 클릭

DOM Input 값을 State에 저장하기

여러 Input 동시에 처리하기

다른 컴포넌트로 이벤트 전달

컴포넌트간 이벤트 전달하기

커스텀 이벤트

이벤트 명명법

02 Hooks

Hooks 개요

Hook이란?

• 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용
  앞선 강의에서 사용해본 useState가 바로 State Hook이다.

유의사항

State Hook과 Effect Hook

State Hook

Effect Hook

이외의 Hooks

다양한 내장 Hook

useMemo

useCallback

useRef

나만의 Hook 만들기

Custom Hook

이미지 출처 - Elice