onClick 함수에 callback 형태로 작성하는 경우

개발 도중 의문이 생겨 찾아보고 작성하게 되었다.

onClick={clickBtn}
onClick={() => clickBtn()}

다음 두 코드의 공통점은 onClick시 clickBtn함수를 실행하는 것이고 차이점은 콜백 형태이냐 아니냐가 있다.
clickBtn에 들어갈 인자값이 있다고 하면 함수 뒤에 ()를 붙여야하는데 이럼 onClick할 때만 실행되는 것이 아니라 렌더링 시 무조건 실행이 되어버린다. 그래서 이를 막기 위해 콜백 형태로 쓰는 것이었다.

정리

1. onClick에 함수를 넣을 때 어떤 인자를 받는다던가, 함수 실행의 형태로 작성하려 한다면 콜백함수로 작성한다.
2. 어떤 인자를 받는 게 아니라면, 그냥 함수명만 작성해준다.