강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

성균관대양승찬님의 프로필 이미지
성균관대양승찬

작성한 질문수

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

가위바위보 타이핑하기

onClickBtn 고차함수 사용 이유

해결된 질문

작성

·

354

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 부분을 합쳐서 넣기위해 구성한 것 일까요?

퀴즈

53%나 틀려요. 한번 도전해보세요!

강의에서 설명하는 TypeScript의 `typeof` 및 `keyof` 연산자의 주요 역할은 무엇일까요?

런타임 시 변수의 실제 타입을 확인합니다.

기존 값이나 객체 타입으로부터 새로운 타입을 생성하거나 속성 이름을 가져옵니다.

타입 변환을 강제로 수행하거나 잠재적 undefined 값을 제거합니다.

비동기 함수의 반환 타입을 정의하거나 클래스의 상속 관계를 설정합니다.

답변 1

2

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

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

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

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

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

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

성균관대양승찬님의 프로필 이미지
성균관대양승찬

작성한 질문수

질문하기