[React] onClick시 화살표 콜백을 해야하는 이유

 

항상 똑같은 실수를 여러번 하는 것 같다

리액트에서 버튼을 클릭하는 이벤트를 만들 때 onClick 안에 이벤트 핸들러 함수를 설정한다

하지만, 내가 생각하지 못한 무한 콜백오류가 뜨거나 작동이 안될 때가 있다

 

간단한 실수?이지만 간단한 문제를 자주 범해 글로 남겨 보려 한다

 

 

1.  잘못된 방법XXXXX

 

import './App.css';

function App() {

  const test = () => {
    console.log('hi')
  }

  return (
    <div className="App">
      <button onClick={alert('hi')}>테스트 버튼</button>
    </div>
  );
}

export default App;

 

위 코드와 같이 onClick 이벤트 핸들러에 알림창을 띄우면 버튼을 누르지 않아도 랜더링 되는 순간 알림창이 뜬다

 

이는 리액트가 랜더링시 모든 함수를 실행시키기 때문이다.

버튼을 눌러서 작동되는 것이 아닌 랜더링될때마다 함수가 실행되는 것

 

결국, 리액트에서 onClick 값으로는 함수를 참조한값을 넣어주어야된다

아니면 이벤트가 발생하였을 때 실행되는 것이 아니라, jsx가 평가될 때 실행된다는 것!

 

 

여기서 함수 호출, 함수 참조에 대해 간략하게 알아보자면

 

 

 

 

함수 호출

function test(){
console.log('hi')
}

test() => 함수 호출

 

함수를 실행하는 것, return 값을 반환하여 준다

 

 

함수 참조

function test() {
  console.log("hi");
}

const myFunction = test;  // 이 부분

 

함수를 실행하지 않고 위치를 가르쳐 주는 것, 함수의 이름으로 변수에 할당할 수 있다

 

 

 

 

 

2. 맞는 방법

import './App.css';

function App() {

  const test = () => {
    console.log('hi')
  }

  return (
    <div className="App">
      <button onClick={test}>테스트 버튼</button>
    </div>
  );
}

export default App;

 

위와 같이 함수를 참조하여 값을 전해주면 이벤트시 알맞게 작동한다

 

 

import './App.css';

function App() {

  const test = () => {
    console.log('hi')
  }

  return (
    <div className="App">
      <button onClick={() => test()}>테스트 버튼</button>
    </div>
  );
}

export default App;

 

위와 같이 화살표 함수의 콜백으로 작동하는 방법도 있다

 

또, 만약 인자를 전달해주고 싶으면 화살표 함수를 이용해야한다

 

<button onClick={() => test(id)}/>