React에서 onClick property를 사용하여 클릭 이벤트 발생시 파라미터를 전달하는 방법에 대하여 알아봅니다.



# React onClick 파라미터 전달하기, pass parameters
onClick은 리액트 앱에서 클릭 이벤트가 발생 할 경우 설정된 콜백 함수를 호출하게 됩니다. 이 때 원하는 값을 함수에 전달하는 방법을 알아보겠습니다.

먼저, 사용 가능한 방법으로 크게 세 가지가 존재합니다.

  • 1. 화살표 함수 사용하기 Arrow Function
  • 2. bind() 함수 사용하는 방법 
  • 3. props 사용자 속성 사용하기, property

아래에서 각각 하나씩 알아봅니다.


! 화살표 함수 사용하기, Array function
먼저 onClick 내부에 익명의 화살표 함수를 사용하여 랩핑하는 방법입니다. 즉 익명함수에 내부에 원래 실행하려고 했던 콜백을 파라미터와 함께 추가하면 됩니다. 예를들어 button 태그를 만들고 showMsg()라는 함수에 'webisfree'라는 문자열을 전달하려고 합니다.
<button onClick={ () => { this.showMsg('webisfree'); } }>
  Click
</button>

이제 버튼을 클릭할 경우 내부의 화살표 함수가 실행되면서 showMsg('webisfree')의 콜백이 실행될 것입니다.

이 방법을 가장 먼저 소개한 이유는 간단하고 편리한 파라미터 전달 방법이며 실제로 많이 사용되기 때문입니다. 다만 단점으로 함수가 호출될 때 마다 새로운 익명 함수가 생성되고 호출되므로 리액트앱에서 성능이 중요한 웹의 경우 단점이 될 수 있습니다. 하지만 그 차이는 크지 않습니다.


! bind() 함수 사용하기
다음으로 bind() 함수를 사용하는 방법입니다. bind() 함수는 콜백시 화살표 함수가 아닌 경우 this를 전달하기 위해서 많이 쓰이죠. 파라미터를 전달하는데에도 역시 사용이 가능합니다. 아래와 같이 첫 인자에 this 또는 null 등을 추가하고 두 번째 인자에 원하는 값을 전달하도록 합니다.
<button onClick={ this.showMsg.bind(this, 'webisfree') }>
  Click
</button>

이 방법 역시 간단하며 자주 사용되는 방법 중 하나입니다. 


! prop, data-속성 사용하기
마지막 방법으로 태그 요소의 props(property)를 사용하는 방법입니다. 이 방법은 위 방법들 보다는 복잡합니다. 태그 요소에 prop을 추가하고 선택된 엘리먼트에 접근하여 해당 prop의 값을 불러와 넘겨주는 방법입니다. 아래를 봐주세요.
<button
  data-msg={'webisfree'}
  onClick={ this.showMsg }>
  Click
</button>

다른 예제와 달리 data-msg라는 prop을 추가했습니다. 이제 클릭할 경우 현재의 요소에 접근해 data-msg의 값을 불러오도록 합니다. 값을 불러오기 위해서 getAttribute()를 사용하였습니다.
showMsg = (event) => {
  const msg = event.target.getAttribute('data-msg');
  console.log(msg);
};

콜백 함수에서 값을 읽을 수 있도록 이벤트 객체를 사용하였습니다. 콘솔에 출력된 값은 'webisfree'가 될 것 입니다.


여기까지 React 앱에서 onClick으로 콜백함수를 실행시 값을 전달(pass parameters) 할 수 있는 여러가지 방법을 알아보았습니다.