onClick={login}, onClick={login()}의 차이

<Button text={'Login'} onClick={login} />
<Button text={'Logout'} onClick={logout} />

<Button text={'Login'} onClick={login()} />
<Button text={'Logout'} onClick={logout()} />

 

리액트를 공부하다보면 항상이 이 부분이 헷갈렸고 이번에 제대로 한 번 집고 넘어가보고자 한다.

보면 어떨때는 onClick={login} 이렇게 참조값만 전달하는 경우가 있고 어떤 경우는 onClick={login()}이렇게 함수를 전달해 놓은 경우가 있다. 이 둘의 차이점이 뭘까? 그리고 어느 경우 어떨 때 구분해서 사용해야할까?

 

• onClick={login}의 경우
  login은 함수의 참조를 전달하는 거다. 
  React는 이 login 함수를 이벤트 핸들러로 등록해두고, 버튼이 클릭될 때 login 함수를 실행한다
  즉, 버튼을 클릭할 때만 login 함수가 실행된다.
• onClick={login()}의 경우
  login()은 함수를 실행한 결과값을 전달한다.
  만약 login 함수가 비동기 함수라서 Promise를 반환한다면 onClick에는 Promise가 전달된다
  이러면 버튼이 랜더링될 때 login()이 실행되어 버리고, 버튼을 누르지 않아도 로그인 요청이 되는 문제가 생긴다.

자 그렇다면 이제 상황을 구분지어보자.

예를 들어 Button을 눌렀을 때나, 뭐 특정 Event가 발생해야될 때만 함수가 실행되게 하고 싶다?

그러면 onClick={참조값}만 전달하면 된다.

 

하지만 랜더링이 될 때 값을 전달 받아서 처리하고 싶거나 실행되게끔 하고 싶다?

그러면 onClick={함수} 이렇게 하면 된다.

분명 이렇게 딱 구분지을 수 없는 것이기 하지만 일단은 이렇게 이해하도록 하자.

 

자 그런데 만약에 

 

<Button text="Login" onClick={loginWithParam("google")} />

이런식으로 parameter를 받아야하는 경우에는 어떻게 해야할까?

이 경우는 parameter를 받아야하는데 이렇게 작성해 버리면 랜더링 될 때 실행이 됨으로 내가 원하는 이벤트가 아니다

그러면 어떻게 해야하는 가?

<Button text="Login" onClick={() => loginWithParam("google")} />

익명 함수로 감싸는 걸로 해결하면 된다.