React eventHandler

이벤트 핸들러

• 사용자 인터페이스에서 발생하는 특정 이벤트(클릭, 입력, 포커스 등) 에 반응하여 실행되는 함수를 의미함. 사용자와의 상호작용을 처리하는 데 사용된다.

쉬운것부터 보자.

• 함수 정의

const handleClick = () => {
    console.log("버튼이 클릭되었습니다!");
};

• 이벤트 핸들러 연결 : HTML 요소에 이벤트 핸들러를 연결한다. React 에서는 JSX에서 직접 사용할 수 있다.

<button onClick={handleClick}>클릭하세요</button>

자주 쓰이는 onClick 이벤트 핸들러
<button onClick={handleButtonClick}>제출</button>
-> 버튼 클릭 시 특정 동작 수행
<a href="#" onClick={handleLinkClick}>링크</a>
-> 링크를 클릭했을 때 페이지 이동을 방지하거나 특정 작업을 수행
<div onClick={handleItemClick}>아이템 1</div>
-> 아이템 선택
<button onClick={toggleModal}>모달 열기</button>
-> 모달 선택

드롭다운을 보면

1. 상태관리

import React, { useState } from 'react';

const DropdownExample = () => {
    const [isDropOpen, setDropOpen] = useState(false); // 드롭다운 상태 초기화

2. 토글 함수 정의

    const toggleDropdown = () => {
        setDropOpen(!isDropOpen); // 현재 상태를 반전
    };

3. 버튼 클릭 이벤트

    return (
        <div>
            <button onClick={toggleDropdown}>
                {isDropOpen ? '닫기' : '열기'} {/* 상태에 따라 버튼 텍스트 변경 */}
            </button>

4. 드롭다운 내용 표시

            {isDropOpen && (
                <div className="dropdown-content">
                    <p>옵션 1</p>
                    <p>옵션 2</p>
                    <p>옵션 3</p>
                </div>
            )}
        </div>
    );
};

export default DropdownExample;

5. 전체 코드

import React, { useState } from 'react';

const DropdownExample = () => {
    const [isDropOpen, setDropOpen] = useState(false); // 드롭다운 상태 초기화

    const toggleDropdown = () => {
        setDropOpen(!isDropOpen); // 현재 상태를 반전
    };

    return (
        <div>
            <button onClick={toggleDropdown}>
                {isDropOpen ? '닫기' : '열기'}
            </button>
            {isDropOpen && (
                <div className="dropdown-content">
                    <p>옵션 1</p>
                    <p>옵션 2</p>
                    <p>옵션 3</p>
                </div>
            )}
        </div>
    );
};

export default DropdownExample;


요약 : 버튼 클릭 시 호출되어 isDropOpen의 값을 반전시킴. 이 상태에 따라 드롭다운의 내용이 조건부 렌더링되므로 사용자가 버튼을 클릭할 때 드롭다운이 열리거나 닫히게 됨. 상태관리 + 조건부 렌더링

그럼 onClick 말고 다른거는?

onChange : <input>, <textarea>, <select>와 같은 폼 요소에서 값이 변경될 때 발생
<input type="text" onChange={(e) => console.log(e.target.value)} />

onFocus : 요소가 포커스를 받을 때 사용
<input type="text" onFocus={() => console.log('Focused!')} />

onBlur : 요소가 포커스를 잃을 때 발생
<input type="text" onBlur={() => console.log('Blurred!')} />

onSubmit : <Form> 요소에서 제출 이벤트가 발생할 때 사용
<form onSubmit={(e) => { e.preventDefault(); console.log('Submitted!'); }}>
    <button type="submit">제출</button>
</form>

onMouseEnter : 마우스 커서가 요소에 들어올 때 발생
<div onMouseEnter={() => console.log('Mouse entered!')}>Hover me!</div>

onMouseLeave : 마우스 커서가 요소에 나갈 때 발생
<div onMouseLeave={() => console.log('Mouse left!')}>Hover me!</div>

onKeyDown : 키가 눌릴 때 발생
<input type="text" onKeyDown={(e) => console.log(e.key)} />

onKeyUp : 키가 떼어 질 때 발생
<input type="text" onKeyUp={(e) => console.log(e.key)} />

onKeyPress : 키가 눌린 후 발생 
<input type="text" onKeyPress={(e) => console.log(e.key)} />

onLoad : 이미지나 다른 리소스가 로드될 때 발생
<img src="image.jpg" onLoad={() => console.log('Image loaded!')} />

onError : 이미지나 다른 리소스 로드에 실패했을 때 발생
<img src="invalid.jpg" onError={() => console.log('Error loading image!')} />

onScroll : 요소가 스크롤 될 떄 발생
<div onScroll={() => console.log('Scrolled!')} style={{ overflowY: 'scroll', height: '100px' }}>
    {/* 내용 */}
</div>

참고 자료 :
https://kellis.tistory.com/110
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture