[ReactJS] React에서 이벤트 리스너를 연결하고, event 객체를 활용할 때 주의해야 할 점

🚨 문제 상황

React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하기 위해 위와 같은 코드를 작성하였다. 하지만 'event is deprecated'라는 이해할 수 없는 에러가 발생하였고 코드 역시 실행되지 않았다. 

 

---

💡 문제 해결 및 과정

바닐라 JS에서 특정 요소에 이벤트를 연결해주려면 우선 해당 요소에 해당하는 DOM 객체를 DOM 트리에서 찾아야 한다. 그러고 난 후, 이 객체에 원하는 이벤트를 addEventListener 함수를 통해 연결해주면 된다. 혹은 인라인 방식으로 특정 요소에 해당하는 HTML 태그에 이벤트 속성을 바로 부여해주는 방법도 있다.

 

React에서 특정 요소에 이벤트를 연결해주려면 바닐라 JS에서의 인라인 방식처럼 JSX로 변환된 코드의 태그에 속성으로 이벤트를 부여해주는 방법을 사용한다. 이 때 속성값의 중괄호 내부에는 화살표 함수를 이용한 익명 함수를 통해 이벤트 함수를 작성해도 되고, 혹은 함수의 이름만 작성하고 외부에서 이벤트 함수를 따로 정의해도 된다.

 

이 중 후자의 방식인 함수의 이름을 작성하는 방법에는 2가지가 있는데, 이 때 양식을 반드시 지켜서 코드를 작성해야 한다.

// 1.
export default function Login() {

  function handleBtnClick() {
    // (생략)
  }

  return (
    <button
      onClick={handleBtnClick}
    >
  );
}

// 2.
export default function Login() {

  function handleBtnClick() {
    // (생략)
  }

  return (
    <button
      onClick={() => handleBtnClick()}
    >
  );
}

 

만일 여기서 event 객체를 매개변수로 받아 활용하고 싶다면 다음과 같이 코드를 작성하면 된다. 역시 양식을 반드시 지켜서 코드를 작성하는 것이 중요하다.

// 1. 아까와 별 다를 바 없음
export default function Login() {

  function handleBtnClick(event) {
    // (생략)
  }

  return (
    <button
      onClick={handleBtnClick}
    >
  );
}

// 2. (event) => 함수 이름(event)
// 양 괄호 내에 모두 event 매개변수 이름을 작성해야 한다!!
export default function Login() {

  function handleBtnClick() {
    // (생략)
  }

  return (
    <button
      onClick={(event) => handleBtnClick(event)}
    >
  );
}

 

사실 이 문제를 해결하는 과정은 정말 단순했다. 인터넷에서 다른 React 코드를 보다가 나의 코드를 다시 보고 '어? 여기에 매개변수를 넣어줘야 하는 거 아닌가?'하는 깨달음을 얻어 바로 오류를 해결했다.

 

---

💬 느낀 점

이번에 마주했던 에러는 사실 정말 사소한 문제라는 생각이 들었다. 하지만 이를 해결하는 데엔 꽤나 오랜 시간이 소요되었다. 이 글을 보는 누군가는 '뭘 이런 걸 가지고..?'라는 생각이 들 지도 모르겠다. 하지만 코딩을 공부해 본 사람이라면 사소해보였던 문제에 의외로 오랜 시간동안 막혀 전전긍긍했던 경험이 누구나 한 번쯤 있으리라 생각한다. 이번 문제가 나에겐 그런 류의 문제가 아니었을까 싶다. 대신 이번 경험을 통해 깨달았던 점들은 확실히 학습하고, 다음부턴 이와 같은 실수를 저지르지 않도록 하는 것이 지금 나에게 더 중요한 과제라는 생각이 든다.