섹션 13. 10-02 강의 질문

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

해결된 질문

작성

308

안녕하세요 차근차근 강의 따라가고 있는 수강생입니다

섹션 13. 10-02 강의를 듣고 궁금한 점이 생겨 글을 남깁니다

export interface IBoardWriteUIProps {
  onClickSubmit: (event: MouseEvent<HTMLButtonElement>) => void;
  onClickUpdate: (event: MouseEvent<HTMLButtonElement>) => void;
   ...
}

강의에서는 위 두 함수의 매개변수를 지정해 주었습니다

export interface IBoardWriteUIProps {
  onClickSubmit: () => void;
  onClickUpdate: () => void;
   ...
}

그런데 매개변수를 지정하지 않아도 오류가 없더라고요

  const onClickSubmit = async () => { 
   ...
  };

  const onClickUpdate = async () => {
   ...
  };

두 함수는 매개변수로 event를 받아오고 있지 않습니다

그래서 궁금한 점은 아래 2가지 입니다

매개변수를 지정한 이유
두 가지 경우 모두 오류가 나지 않는 이유

항상 감사합니다

react node.js next.js typescript

답변 2

인프런 AI 인턴

안녕하세요 zero.1.0.one.xx 님, 인프런 AI 인턴이에요.

강의에서 매개변수를 지정한 이유는, 해당 함수들이 버튼의 클릭 이벤트에 바인딩되기 때문입니다. 버튼을 클릭할 때 발생하는 MouseEvent를 매개변수로 받아올 수 있도록 지정해준 것입니다. 이렇게 하면 함수 내에서 이벤트 객체를 사용하여 원하는 동작을 수행할 수 있습니다.

그러나 매개변수를 지정하지 않고 함수를 작성해도 오류가 발생하지 않는 이유는 TypeScript의 타입 추론 덕분입니다. TypeScript는 함수의 매개변수와 반환값의 타입을 추론할 수 있습니다. 따라서 타입 추론을 통해 매개변수가 없는 함수를 사용하더라도 문제 없이 동작할 수 있습니다.

감사합니다!

노원두

지식공유자

안녕하세요! zero.1.0.one.xx님!

먼저 1번부터 답변을 드리면, 사실 해당 매개변수는 타입스크립트에서 미리 정의되어있기 때문에 굳이 사용하지 않을 것이라면 입력해야할 필요는 없어요!
수업에서는 어떤 타입이 들어가게되는지 이해를 돕기 위해 함께 작성하였답니다!

다음으로 2번에 대한 답변을 드리면,
해당 함수에 타입을 지정하게 되면, 매개변수의 타입은 생략될 수 있어요!
이것 역시 타입추론의 한 부분이 됩니다!^^

// 1. const aaa: number => 추론
const aaa = 1+1


// 2. const bbb: IBbb => 괄호 안에 qqq가 들어갈 것임을 추론
type IBbb: (qqq: string) => void
const bbb: IBbb = () => {

}

// [위 2번의 주의사항] => 추론되어 생략이 가능한 것이지, 마음대로 변경하시면 안됩니다!
type IBbb: (qqq: string) => void
const bbb: IBbb = (qqq: number) => { // 에러발생

}

zero.1.0.one.xx

질문자

감사합니다

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

섹션 13. 10-02 강의 질문