react onClick 파라미터 값 전달하는 방법

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

# React onClick 파라미터 전달하기, pass parameters

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

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

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

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

! 화살표 함수 사용하기, Array function

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

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

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

! bind() 함수 사용하기

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

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

! prop, data-속성 사용하기

마지막 방법으로 태그 요소의 props(property)를 사용하는 방법입니다. 이 방법은 위 방법들 보다는 복잡합니다. 태그 요소에 prop을 추가하고 선택된 엘리먼트에 접근하여 해당 prop의 값을 불러와 넘겨주는 방법입니다. 아래를 봐주세요.

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

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


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