[React] 이벤트 핸들러에 argument 전달하는 방법

Tab 컴포넌트 구현 중 현재 어떤 탭이 선택되었는지 알기 위해 클릭 이벤트 핸들러에 index를 전달해야 했다. 이벤트 핸들러에 인자를 전달할 때는 화살표 함수를 이용해 이벤트 핸들러를 감싸고, 전달하고자 하는 인자를 첫번째 인자로 넣어서 호출해 준다. event 객체가 필요한 경우 두번째 인자 자리에 넣어주면 된다.

 

[2022. 12. 27. 추가 수정] 

event 객체와 전달하고자 하는 인자를 같이 사용하고 싶은 경우, 전달인자의 순서는 크게 중요하지 않다. 가령 click 이벤트의 경우 onClick={(e) => handlerFunc(e, 전달하고싶은값)} 으로 event 객체를 먼저 넣어줘도 핸들러 함수의 파라미터와 핸들러 함수를 호출하는 위치에서 파라미터에 따른 인자의 순서만 잘 지키면 상관없다. 

 

🔽 이벤트 핸들러 예시: 

// 예시1
onClick={(e) => handleClick(e, item.id)}

// 예시2
onChange={(e) => {
      handleQuantityChange(Number(e.target.value), item.id);
}}

 

화살표 함수로 감싸지 않고 곧바로 이벤트 핸들러 함수를 onClick으로 호출하면 핸들러 함수가 곧장 실행되면서 상태변경 → 리렌더링 → 상태 변경 → 리렌더링의 무한 루프에 빠져 Too many re-renders 에러가 뜨니 주의해야 한다. 

 

export const Tab = () => {
  const [currentTab, setCurrentTab] = useState(0);

  const menuArr = [
    { name: "Tab1", content: "Tab menu ONE" },
    { name: "Tab2", content: "Tab menu TWO" },
    { name: "Tab3", content: "Tab menu THREE" },
  ];

  const selectMenuHandler = (index) => {
    setCurrentTab(index);
  };

  return (
    <>
      <div>
        <TabMenu>
          {menuArr.map((item, idx) => (
            <li
              key={idx}
              className={`submenu${currentTab === idx ? " focused" : ""}`}
              onClick={() => {
                selectMenuHandler(idx);
              }}
            >
              {item.name}
            </li>
          ))}
        </TabMenu>
        <Desc>
          <p>{menuArr[currentTab].content}</p>
        </Desc>
      </div>
    </>
  );
};

 

 

📚 참고자료

이벤트 처리하기 – React