onClickBtn 고차함수 사용 이유

안녕하세요 제로초님, 강의 항상 잘듣고 있는 수강생 인데요. onClickBtn을 왜 고차함수로 구성하셨는지 궁금해서 질문드립니다. 

저는 리액트(자바스크립트)로 코딩하면서 이벤트 핸들러가 인자를 요구하더라도 아래와 같이 작성했었는데요

const onClickBtn = (choice: keyof typeof rspCoords) => { ... }

<button onClick={onClickBtn('보')}/>

위와 같이 인자가 요구되더라도 onClick props 안에 필요한 인자와 함수를 적어넣었으면, 자바스크립트에서는 정상 작동했던 것 같은데 타입스크립트에서는 오류가 나는 것 같네요. 한편, 아래와 같이 JSX 부분을 변경하면 또 정상 작동 하는 것 같은데요.

const onClickBtn = (choice: keyof typeof rspCoords) => { ... }


<button id="paper" className="btn" onClick={() => onClickBtn('보')}>

그렇다면, 고차함수를 사용한 이유는 props 부분의 arrow 부분을 합쳐서 넣기위해 구성한 것 일까요?