[React] 리액트에서 onClick 이벤트핸들러에 매개변수(파라미터) 전달하기

리액트에서 onClick 함수를 사용할때, 아래와 같이 id값을 인자로 넘겨줘야하는 경우가 발생했다.

 

 

🐬 처음 시도했던 방법

const deleteClick = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  };
  
  return(
  	<button onClick={deleteClick(todo.id)}>
    );

무작정 자바스크립트에서 사용했던 방식으로 위에서 생성한 함수에 원하는 파라미터를 넘겨주었다. 그러자 내가 원래 예상했던 결과가 발생하지 않았다..😅

 

 <button type="button" onClick={test('매개변수 값')} /> 이렇게 작성할 경우, 리액트에서는 화면이 계속 렌더링되면서 버튼을 누르지 않더라도 계속, 이벤트가 발생되기 때문에 우리가 특정 이벤트를 발생시켰을 때 얻는 결과를 볼 수 없게 된다!!!

 

분명 이전에 공부했을 때 이벤트 핸들러에 매개변수를 전달할 경우, 화살표함수로 감싸서 전달해야 한다고 했었는데 까먹고 있다가 오류를 마주치니 너무 당황스러워서 꽤나 고생했다......

 덕분에 머릿속에 제대로 꽂혀서 다시 까먹을 일은 없을 것 같다 ^_^

 

 

🐬 올바른 방법

• 매개변수가 들어갈 필요 없는 경우

import React, { useState } from "react";

function App() {
  let [num, setNum] = useState("0");
  let onNumPlusHandler = () => {
    setNum(num++);
  };
  let onNumMinusHandler = () => {
    setNum(--num);
  };

  return (
    <div>
      {num}
      <br></br>
      <button onClick={onNumPlusHandler}>+1</button>
      <button onClick={onNumMinusHandler}>-1</button>
    </div>
  );
}

export default App;

함수 이름만 넣으면 ok!

 

• 매개변수가 들어가야할 경우
  

    const deleteClick = (id) => {
      const newTodos = todos.filter((todo) => todo.id !== id);
      setTodos(newTodos);
    };
    return(
      <button
       className="delete_btn"
       onClick={() => deleteClick(todo.id)} 
       >
       );​

  
  화살표함수로 감싼 후에 매개변수 넘겨주어야 한다!!
  
  

🐬결론!!
매개변수를 받는 함수는 화살표 함수로 감싸고, 인자를 받지 않는 함수는 함수이름만 적어서 작성!!