inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 게임을 만들며 배우는 React에 TypeScript 적용하기

가위바위보 타이핑하기

onClickBtn 고차함수 사용 이유

해결된 질문

356

성균관대양승찬

작성한 질문수 1

0

안녕하세요 제로초님, 강의 항상 잘듣고 있는 수강생 인데요. 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 부분을 합쳐서 넣기위해 구성한 것 일까요?

고차함수 react typescript

답변 1

2

제로초(조현영)

onClick 자리에는 함수가 들어가야 합니다.

onClickBtn이 고차함수가 아니라면 onClickBtn('보')는 함수가 아닙니다.

const a = (b) => (c) => {};
에서 a()는 (c) => {}이니까 함수이지만

const a = (b) => {}에서

a()는 undefined라서 함수가 아닙니다.

0

성균관대양승찬

이벤트 핸들러 자리에는 함수 자체가 들어가야 하는게 중요한 개념이군요! 감사합니다! 꼭 완강하겠습니다

express response 타입

0

229

1

createRoot

0

291

1

babel-loader질문입니다! 왜쓰는지 궁금합니다!

0

695

1

undefined 처리

0

503

1

compilerOptions lib 관련

0

335

1

event type 찾기

0

332

1

정확한 type vs 가독성

0

306

1

useRef에 대해 질문드립니다.

0

313

1

tsx파일에서 에러 표시

0

874

1

Props type 질문드립니다.

0

238

1

webpack.config.ts/ Could not find a declaration file for module '@pmmmwh/react-refresh-webpack-plugin'.

0

602

1

18버전에서의 ReactDOM.render

1

663

1

깃허브에 react-router@6 업데이트 해주신 코드 질문드립니다.

0

301

1

2강 끝말잇기 npx webpack 오류가 질의사항

0

412

1

Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.

0

723

1

webpack.config.ts import 할 때 에러좀 봐주세요!!

0

312

1

React.FC에 대해 궁금합니다.

0

716

1

가위바위보 interval 타입과 이벤트타입에 관한질문

0

348

1

npm run dev 실행은 성공적으로 되는데

0

691

2

redux 유료강좌를 듣고 와야 되는지 여쭈어보려고 합니다.

0

328

1

git 내용과 강의 내용이 달라서 여쭈어봅니다.

0

228

1

Ball.tsx 타이핑

0

339

2

react-router 버젼 업그레이드 변경사항 문의

0

293

2

리액트 타입스크립트 공식문서

0

343

1