• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

섹션 13. 10-02 강의 질문

23.11.10 04:54 작성 조회수 221

0

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

섹션 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가지 입니다

  1. 매개변수를 지정한 이유

  2. 두 가지 경우 모두 오류가 나지 않는 이유

항상 감사합니다

답변 2

·

답변을 작성해보세요.

1

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.11.12

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

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

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

감사합니다!

0

안녕하세요! 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) => { // 에러발생

}

감사합니다