08. 이벤트(Event Handling)
1. 이벤트(Event)란?
이벤트(Event)는 사용자가 웹페이지에서 수행하는 모든 동작을 의미합니다.
예를 들어
버튼 클릭
입력창 입력
폼 제출
마우스 이동
키보드 입력
등이 모두 이벤트입니다.
React에서는 이벤트가 발생하면 지정한 함수가 실행됩니다.
2. React 이벤트 특징
HTML에서는
<button onclick="hello()">
처럼 작성합니다.
React에서는
<button onClick={hello}>
처럼 작성합니다.
차이점
첫 글자가 대문자(Camel Case)
문자열이 아닌 함수 전달
JavaScript 함수와 함께 사용
3. onClick
가장 많이 사용하는 이벤트입니다.
function App(){
function click(){
alert("예약 완료");
}
return(
<button onClick={click}>
예약하기
</button>
)
}
버튼을 누르면
예약 완료
가 출력됩니다.
4. 익명 함수 사용
실무에서는 자주 사용하는 방식입니다.
<button
onClick={()=>{
alert("예약 완료")
}}
>
예약하기
</button>
5. useState와 함께 사용
const [count,setCount]=useState(0);
버튼 클릭
<button
onClick={()=>setCount(count+1)}
>
증가
</button>
화면
0
↓
1
↓
2
↓
3
State와 이벤트를 함께 사용하는 가장 기본적인 예제입니다.
6. onChange
입력창에서 가장 많이 사용하는 이벤트입니다.
const [name,setName]=useState("");
<input
value={name}
onChange={(e)=>setName(e.target.value)}
/>
사용자가 입력할 때마다 State가 변경됩니다.
7. Event 객체
이벤트가 발생하면 Event 객체를 받을 수 있습니다.
function change(e){
console.log(e);
}
가장 많이 사용하는 값
e.target.value
예제
function change(e){
console.log(e.target.value);
}
입력한 내용이 출력됩니다.
8. onSubmit
폼(Form)을 제출할 때 사용합니다.
<form
onSubmit={submit}
>
함수
function submit(e){
e.preventDefault();
}
preventDefault()는
기본 동작(새로고침)을 막아줍니다.
React에서는 거의 항상 사용합니다.
9. onMouseEnter
마우스를 올렸을 때 실행됩니다.
<div
onMouseEnter={()=>{
console.log("마우스 진입")
}}
>
코스 안내
</div>
10. onMouseLeave
마우스가 벗어날 때 실행됩니다.
<div
onMouseLeave={()=>{
console.log("마우스 나감")
}}
>
코스 안내
</div>
11. onKeyDown
키보드를 누를 때 실행됩니다.
<input
onKeyDown={(e)=>{
console.log(e.key)
}}
/>
Enter만 처리
if(e.key==="Enter"){
console.log("검색")
}
12. 동부산CC 예제
예약 버튼
<button
onClick={()=>{
alert("예약 페이지 이동")
}}
>
예약하기
</button>
좋아요
const [liked,setLiked]=useState(false);
<button
onClick={()=>setLiked(!liked)}
>
{liked ? "♥":"♡"}
</button>
예약 입력
<input
value={name}
onChange={(e)=>{
setName(e.target.value)
}}
/>
모달 열기
<button
onClick={()=>setModal(true)}
>
상세보기
</button>
모달 닫기
<button
onClick={()=>setModal(false)}
>
닫기
</button>
13. 이벤트 전달
부모
<CourseCard
onOpen={setSelectedCourse}
/>
자식
<button
onClick={()=>onOpen(course)}
>
상세보기
</button>
버튼을 누르면
부모의
setSelectedCourse()
가 실행됩니다.
14. React에서 많이 사용하는 이벤트
이벤트 설명
onClick 버튼 클릭
onChange 입력값 변경
onSubmit 폼 제출
onMouseEnter 마우스 진입
onMouseLeave 마우스 벗어남
onKeyDown 키 입력
onFocus 입력창 선택
onBlur 입력창 선택 해제
15. 이벤트 실행 흐름
사용자 클릭
↓
onClick
↓
함수 실행
↓
State 변경
↓
React 렌더링
↓
화면 변경
이것이 React 이벤트의 기본 흐름입니다.
정리
React의 이벤트는 HTML 이벤트와 비슷하지만 카멜 표기법(Camel Case)을 사용하며, 문자열이 아닌 함수를 전달합니다.
가장 많이 사용하는 이벤트는 onClick, onChange, onSubmit이며, 대부분 useState와 함께 사용하여 화면을 동적으로 변경합니다.
동부산CC 프로젝트에서는 예약 버튼, 좋아요 버튼, 예약 입력폼, 코스 상세 모달, 모바일 메뉴 등 대부분의 사용자 동작을 이벤트를 통해 처리할 수 있습니다.
React에서는 이벤트 → 함수 실행 → State 변경 → 화면 자동 업데이트의 흐름을 이해하는 것이 가장 중요합니다.
1. 이벤트(Event)란?
이벤트(Event)는 사용자가 웹페이지에서 수행하는 모든 동작을 의미합니다.
예를 들어
버튼 클릭
입력창 입력
폼 제출
마우스 이동
키보드 입력
등이 모두 이벤트입니다.
React에서는 이벤트가 발생하면 지정한 함수가 실행됩니다.
2. React 이벤트 특징
HTML에서는
<button onclick="hello()">
처럼 작성합니다.
React에서는
<button onClick={hello}>
처럼 작성합니다.
차이점
첫 글자가 대문자(Camel Case)
문자열이 아닌 함수 전달
JavaScript 함수와 함께 사용
3. onClick
가장 많이 사용하는 이벤트입니다.
function App(){
function click(){
alert("예약 완료");
}
return(
<button onClick={click}>
예약하기
</button>
)
}
버튼을 누르면
예약 완료
가 출력됩니다.
4. 익명 함수 사용
실무에서는 자주 사용하는 방식입니다.
<button
onClick={()=>{
alert("예약 완료")
}}
>
예약하기
</button>
5. useState와 함께 사용
const [count,setCount]=useState(0);
버튼 클릭
<button
onClick={()=>setCount(count+1)}
>
증가
</button>
화면
0
↓
1
↓
2
↓
3
State와 이벤트를 함께 사용하는 가장 기본적인 예제입니다.
6. onChange
입력창에서 가장 많이 사용하는 이벤트입니다.
const [name,setName]=useState("");
<input
value={name}
onChange={(e)=>setName(e.target.value)}
/>
사용자가 입력할 때마다 State가 변경됩니다.
7. Event 객체
이벤트가 발생하면 Event 객체를 받을 수 있습니다.
function change(e){
console.log(e);
}
가장 많이 사용하는 값
e.target.value
예제
function change(e){
console.log(e.target.value);
}
입력한 내용이 출력됩니다.
8. onSubmit
폼(Form)을 제출할 때 사용합니다.
<form
onSubmit={submit}
>
함수
function submit(e){
e.preventDefault();
}
preventDefault()는
기본 동작(새로고침)을 막아줍니다.
React에서는 거의 항상 사용합니다.
9. onMouseEnter
마우스를 올렸을 때 실행됩니다.
<div
onMouseEnter={()=>{
console.log("마우스 진입")
}}
>
코스 안내
</div>
10. onMouseLeave
마우스가 벗어날 때 실행됩니다.
<div
onMouseLeave={()=>{
console.log("마우스 나감")
}}
>
코스 안내
</div>
11. onKeyDown
키보드를 누를 때 실행됩니다.
<input
onKeyDown={(e)=>{
console.log(e.key)
}}
/>
Enter만 처리
if(e.key==="Enter"){
console.log("검색")
}
12. 동부산CC 예제
예약 버튼
<button
onClick={()=>{
alert("예약 페이지 이동")
}}
>
예약하기
</button>
좋아요
const [liked,setLiked]=useState(false);
<button
onClick={()=>setLiked(!liked)}
>
{liked ? "♥":"♡"}
</button>
예약 입력
<input
value={name}
onChange={(e)=>{
setName(e.target.value)
}}
/>
모달 열기
<button
onClick={()=>setModal(true)}
>
상세보기
</button>
모달 닫기
<button
onClick={()=>setModal(false)}
>
닫기
</button>
13. 이벤트 전달
부모
<CourseCard
onOpen={setSelectedCourse}
/>
자식
<button
onClick={()=>onOpen(course)}
>
상세보기
</button>
버튼을 누르면
부모의
setSelectedCourse()
가 실행됩니다.
14. React에서 많이 사용하는 이벤트
이벤트 설명
onClick 버튼 클릭
onChange 입력값 변경
onSubmit 폼 제출
onMouseEnter 마우스 진입
onMouseLeave 마우스 벗어남
onKeyDown 키 입력
onFocus 입력창 선택
onBlur 입력창 선택 해제
15. 이벤트 실행 흐름
사용자 클릭
↓
onClick
↓
함수 실행
↓
State 변경
↓
React 렌더링
↓
화면 변경
이것이 React 이벤트의 기본 흐름입니다.
정리
React의 이벤트는 HTML 이벤트와 비슷하지만 카멜 표기법(Camel Case)을 사용하며, 문자열이 아닌 함수를 전달합니다.
가장 많이 사용하는 이벤트는 onClick, onChange, onSubmit이며, 대부분 useState와 함께 사용하여 화면을 동적으로 변경합니다.
동부산CC 프로젝트에서는 예약 버튼, 좋아요 버튼, 예약 입력폼, 코스 상세 모달, 모바일 메뉴 등 대부분의 사용자 동작을 이벤트를 통해 처리할 수 있습니다.
React에서는 이벤트 → 함수 실행 → State 변경 → 화면 자동 업데이트의 흐름을 이해하는 것이 가장 중요합니다.
#08. 이벤트(Event Handling)