React에서 onclick 이벤트에 매개 변수 전달하기

 

 

리액트에서 클릭 이벤트 시 필요한 값을 매개변수로 전달할 때 일반적으로 자바스크립트에서 사용하던 방식으로 전달하게 되면 원하는 결과가 발생되지 않습니다.

 

만약 일반적인 방식처럼 <button type="button" onClick={test('매개변수 값')} /> 작성한다면 리액트는 화면이 Render 되면서 계속해서 이벤트가 발생되기 때문에 우리가 원하는 특정 이벤트일 때 결과를 얻는 이벤트는 적용할 수 없습니다.  그래서 우리가 원하는 결과를 위해서는 화살표 함수로 감싸서 전달해야 우리가 원하는 클릭 이벤트가 발생했을 때 원하는 매개변수 값을 확인할 수 있습니다. 보다 이해가 쉽게 코드를 보면서 살펴볼게요.

 

예제 코드

import React from 'react';

const Example = () => {  
  function sayHello(name) {
    alert(name);
  }
  
  return (
    <button onClick={() => sayHello('Tom')}>인사하기</button>
  );
}

export default Example;

 

매개변수와 같이 기본적인 event 핸들링까지 같이 전달해야 하는 경우에는 아래와 같이 작성해서 전달해 줍니다.

import React from 'react';

const Example = () => {  
  function sayHello(event, name) {
    alert(event, name);
  }
  
  return (
    <button onClick={(event) => sayHello(event, 'Tom')}>인사하기</button>
  );
}

export default Example;

 

결론적으로 내용을 정리하면 매개변수를 받는 함수는 화살표 함수로 감싸고, 인자를 받지 않는 함수는 함수 이름만 적어서 작성합니다.

const CountApp = () => {
  const [count, setCount] = useState(0);

  const onIncrease = (n) => {
    setCount(count + n);
  }
  const onDecrease = () => {
    setCount(count - 1);
  }

  return(
    <>
      <p>count: {count}</p>
      // 매개변수를 받는 핸들러
      <button onClick={() => onIncrease(3)}>3 증가</button>
      // 매개변수를 받지 않는 핸들러
      <button onClick={onDecrease}1 감소</button>
    </>
  );
}

어찌 보면 당연한 내용인데 저는 이 내용을 정확히 몰라서 한참 고생했네요. 검색해도 내용이 나오지 않아 한참 동안 고생했네요. 이 글을 읽는 분들은 저와 같이 고생하지 마시고 즐겁게 코딩하세요. 

 

감사합니다.