[React] 이벤트 처리

React – A JavaScript library for building user interfaces

 

 

 이벤트 (event) 

 

 

▶  이벤트(event) 란?

 

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.

 

Element가 로딩되었을 때, 사용자가 Element를 클릭했을 때, 마우스를 올렸을 때,

더블 클릭했을 때, 키보드 입력을 주었을 때 등 다양한 이벤트가 존재한다.

 

유저의 행동에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있다.

이렇게 발생된 이벤트를 자바스크립트를 이용해 대응할 수 있다.

 

이벤트 핸들러 함수에서는 다양한 로직을 처리하고 그 결과를 사용자에 출력하여 알릴 수 있다.

 

 

 

 

 

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

 

방법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 Element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달한다.

이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있다.

이벤트 형태(클릭, 키 입력 등)와 DOM 종류(button, form, input 등)에 따라 전달되는 이벤트 object의 내용이 다르다.

const App = () => {
    const handleChange = (event) => {
        console.log(event.target.value + "라고 입력하셨네요.");
    }
    
    return (
        <div>
        	<input onChange={handleChange} />
        </div>
    );
};

 

 

많이 사용하는 DOM 이벤트

 

-  onClick  :  Element를 클릭했을 때

-  onChange  :  Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)

-  onKeyDown, onKeyUp, onKeyPress  :  키보드 입력이 일어났을 때

-  onDoubleClick  :  Element를 더블 클릭했을 때

-  onFocus  :  Element에 Focus되었을 때

-  onBlur  :  Element가 Focus를 잃었을 때

-  onSubmit  :  Form Element에서 Submit 했을 때

 

 

[참고]  MDN  -  Event

Event - Web API | MDN

 

 

 

 

 

 

 

▶  컴포넌트 내 이벤트 처리

 

 

1)  DOM 버튼 클릭

const App = () => {
    const handleClick = () => {
    	alert("클릭했습니다.");
    }
    return (
        <div>
        	<button onClick={handleClick}>클릭하세요</button>
        </div>
    );
};

 

 

 

 

2)  DOM input 값을 State에 저장하기

 

event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.

현재 event의 target은 input element이므로 입력된 value를 가져와 State에 저장한다.

const App = () => {
    const [inputValue, setInputValue] = useState("defaultValue");
    const handleChange = (event) => {
    	setInputValue(event.target.value);
    }
    
    return (
		<div>
			<input onChange={hadleChange} defaultValue={inputValue} />
			<br />
			입력한 값은: {inputValue}
		</div>
	);
};

 

 

 

 

3)  여러 개의 input 동시에 처리하기

 

State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 input을 state로 관리하는 방법이 효율적이다.

target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영한다.

const App = () => {
    const [user, setUser] = useState({ name; "민수", school: "엘리스대학교" });
    
    const handleChange = (event) => {
        const { name, value } = event.target;
        const newUser = { ...user };
        newUser[name] = value;
        setUser(newUser);
        
        // setUser((current) => {
        //	 const newUser = {...current};
        // 	 newUser[name] = value;
        //	 return newUser;
        // });
    };
    
    return (
        <div>
        	<input name="name" onChange={handleChange} value={user.name} />
        	<br />
        	<input name="school" onChange={handleChange} value={user.school} />
        	<p>{user.name}님은 {user.school}에 재학중입니다.</p>
        </div>
    );
};

 

 

 

 

 

 

▶  컴포넌트 내 이벤트 처리

 

 

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

 

사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우 아래와 같이

이벤트를 Props로 전달하여 처리할 수 있다.

const MyForm = ({ onChange }) => {
    return (
        <div>
            <span>이름: </span>
            <input onChange={onChange} />
        </div>
    )
}

const App = () => {
    const [username, setUsername] = useState('');
    
    return (
        <div>
            <h1>{username}님 환영합니다.</h1>
            <MyForm
                onChange={(event) => {setUsername(event.target.value)}}
            />
        </div>
    )
}

 

 

 

 

2)  커스텀 이벤트

 

단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.

const SOS = ({onSOS}) => {
    const [count, setCount] = useState(0);
    const handleClick = () => {
        if(count >= 2) {
        	onSOS();
    	}
    	setCount(count + 1);
    }
    
    return <button onClick={handleClick}>
    	세 번 누르면 긴급호출({count})
    </button>
}

const App = () => {
    return (
        <div>
            <SOS
                onSOS={() => {alert("긴급사태!");}}
            />
        </div>
    );
};

 

 

 

3)  이벤트 명명법

 

직접 이벤트를 만들 때 이름을 자유롭게 설정할 수 있다.

 

그러나 보통은 코드를 읽을 때 쉽고 빠르게 이해할 수 있도록 "on" + 동사 또는 "on" + 명사 + 동사 형태로 작성한다.

ex) onClick,  onButtonClick,  onInputChange

 

핸들링 함수의 경우, 마찬가지로 "handle" + 동사 또는 "handle" + 명사 + 동사 의 형태로 작성하며

"handle" 대신 이벤트명과 동일한 "on"을 앞에 붙여도 무방하다.

 

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.