[React] 자바스크립트 리액트 이벤트 리스너

 

이벤트 리스너는 사용자가 어떤 이벤트 (마우스, 키보드 등등)를 일으켰을 때 이를 감지하고 적절한 기능을 수행할 수 있게 해 준다.

그래서 이름도 이벤트 리스너

갠 적으로 이 이름 맘에 든다    ᵔࡇᵔ

 

제일 많이 사용하는 이벤트 리스너 중 하나인 onClick 

onClick은 해당 태그를 사용자가 클릭했을 때 이벤트 리스너와 연결된 일을 수행하게 해 준다. 

말고도 마우스 관련해서만 이벤트 리스너가 아래와 같이 많다.

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

 

필요한 상황에 이벤트 리스터 찾아서 함수랑 연결해주면 된다.

 

https://ko.reactjs.org/docs/events.html

합성 이벤트(SyntheticEvent) – React

 

 

 

이벤트 리스너도 클래스형과 함수형으로 나뉘는데 맨날 함수형만 써서 함수형을 설명하면 (코드가 간결하고 바인드 안 해도 돼서 맨날 함수형만 쓰는데 클래스형이랑 함수형 정확히 어떻게 다른지 공부해봐야겠다  ٩( *˙0˙*)۶)

 

 

 

리액트 함수형 컴포넌트에서 이벤트 리스너 등록하기

 

const handle{무언가} = (e) => {
    e.preventDefault();
    {처리할 무언가}
  };


<div>
  <img
    onClick={handle{무언가}}
  />
  <div>확인</div>
 </div>

 

html 태그 내에 onClick 이벤트 리스너를 넣고 jsx 문법 {} 안에 클릭했을 때 실행할 함수를 넣어주면 된다.

 

함수를 넣어주는 방식은 두 가지인데

 

1. 함수 변수로 전달
2. 직접 함수 전달

 

위와 같은 방식이 함수 변수로 전달한 것이고 이걸 직접 함수 전달로 바꾸면

 

<div>
  <img
    onClick={(e) => {
      e.preventDefault();
      {처리할 무언가}
    }
  />
  <div>확인</div>
 </div>

 

이와 같다.

 

함수 내부 코드가 한 줄 넘으면 그냥 변수로 전달하는 게 코드 읽는데 좋다!

 

 

이벤트 리스너 파라미터 전달하기

 

html 코드 내에서 for 같은 조건문 쓰는 경우에 onClick 이벤트에서 함수에 파라미터 전달해야 하는 경우가 있다.

여기서 이상하게 안돼서 헷갈렸던 경우가 많은데 공식 문서에서 권고하는(?) 방식이 있어서 그냥 이렇게 코드를 짜는 게 심신에 편할 것 같다.

 

const clickHandler = (params, e) => {
  console.log(params); // error
  e.preventDefault();
  // do someting...
}

return (
	<button onClick={(e)=>{clickHandler(params, e)}}> Do Something!</button>
)

함수 변수를 화살표 함수로 한번 더 감싸주는 방법이다.

 

 

 

※ 이렇게 쓰면 안된다 ※

const clickHandler = (params, e) => {
  console.log(params); // error
  e.preventDefault();
  // do someting...
}

return (
	<button onClick={clickHandler(params, e)}> Do Something!</button>
)

 

props 함수 이벤트 리스너 등록하기

모달 구현할 때 하위 컴포넌트 이벤트 리스너를 props로 상위 컴포넌트의 함수 변수와 연결해서 사용하는 경우가 있다.

import React from 'react';


const Modal2 = (props) => {
    const { open, close, header } = props;
    return (
        <div className={open ? 'openModal modal' : 'modal'}>
            {open ? (
                <section>
                    <main>
                        {props.children}
                    </main>
                    <footer>
                        <button className="close" onClick={close}> 확인 </button>
                    </footer>
                </section>
            ) : null}
        </div>
    )
}

export default Modal2;

onClick으로 연결된 close는 props로 연결되어 있으니까 클릭하면 상위 컴포넌트에 작성되어 있는 close 함수가 실행될 것이다.