230726 리액트 이벤트 핸들러에 커링 사용하기

230726 리액트 이벤트 핸들러에 커링 사용하기

리액트에서 이벤트 핸들러를 등록하다보면 이벤트 객체 e뿐만 아니라 다른 값을 함께 넘겨야 하는 경우가 있다.
예를 들면 아래와 같이 alert창을 띄우기 위해 문자열을 넘기고, 이벤트 전파를 중단시키기 위해 e 객체가 필요한 경우이다

이벤트 핸들러 함수

useState의 대표적인 사용법으로 input의 value와 onChange를 사용하여 입력값을 관리하는 것이다

onChange에 handleChange함수를 그대로 넣을 수 있는 것은 onChange에서 e객체를 기본으로 인자로 넣어주기 때문이다

다시 말해 이벤트 핸들러로 등록할때는 e를 받는 함수를 작성하면 되는 것이다

...
const [value,setValue] = useState('')

const handleChange = (e) => {
	setValue(e.target.value)
}

return(<input type='text' value={value} onChange={handleChange}>
...

 

커링을 사용한 이벤트 핸들러 함수

이번에는 이벤트 핸들러 함수에서 e객체도 쓰는 동시에 e가 아닌 다른 인자를 전달하고 싶다고 하자.
가장 쉬운 방법은 아래의 stop 버튼처럼 인라인으로 함수를 작성하고 e를 받아 인자 2개로 각각 넣는 것이다
다만 두번째 인자로 e가 들어가는 것이 보기 별로일 수도 있고, 재사용성 측면에서도 좋지 못하다. 

이 때 커링을 사용하여 e객체를 받는 함수를 리턴하는 핸들러 함수를 만들면 인자를 받는 동시에 e객체를 받을 수 있다.

1. play 버튼은 이벤트 전파를 중단시키지 않아 버튼을 누를 경우 아래의 Toolbar도 함께 클릭된다.
2. stop버튼은 이벤트 중단을 위해 e객체가 필요해 두 인자로 각각 넘겼다.
3. resume 버튼은 커링을 사용하여 함수를 반환하는 함수이다.
   반환되는 함수는 e 객체를 입력으로 받기 때문에 onClick에 그대로 쓸 수 있다.

export default function Toolbar() {
  const handleButtonClick = (str, e) => {
    e.stopPropagation();
    alert(str);
  };

  const handleButtonClick2 = (str) => (e) => {
    e.stopPropagation();
    alert(str);
  };
  return (
    <div
      className="Toolbar"
      onClick={() => {
        alert("You clicked on the toolbar!");
      }}
    >
      <button onClick={() => alert("Play!")}>Play</button>
      <button onClick={(e) => handleButtonClick("Stop!", e)}>Stop</button>
      <button onClick={handleButtonClick2("Resume!")}>Resume</button>
    </div>
  );
}