강의

멘토링

로드맵

Inflearn brand logo image

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

유일용님의 프로필 이미지
유일용

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

1.13) 콜백함수

콜백함수 호출시 인자 개수 체크

해결된 질문

작성

·

82

0

안녕하세요. 강사님.
콜백함수 챕터에서 repeat 함수에서 호출하는 Callback 함수에 인수를 하나로 넣어주고 있는데 callback 함수가 어떤 함수 인지 모르는 상태에서 인수가 여러개인 함수를 넣어 준다면 오류가 발생하지 않을까요?

callback 함수로 들어오는 인자가 잘못된 경우 안에서 타입 체크등을 하기도 하는지 궁금합니다.

답변 2

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

네 이럴 경우 함수 내부에서 오류가 발생할 수 있어요! 예를 들어 매개변수로 2개의 값을 받을 거라고 예상했지만 1개만 전달될 경우 두번째 매개변수에 접근하는 코드에서 충분히 오류가 발생할 수 있죠 ... 특히 전달되는 값이 함수나 객체, 배열일 경우 더 그렇구요

그래서 이런 문제를 해결하기 위해서는 타입스크립트를 사용하셔야 해요! 타입스크립트에서는 함수 선언시 설정해둔 매개변수가 충족되지 않거나, 넘치면 오류로 표시하여 프로그램 실행 전에 알려주거든요!

혹시 타입스크립트에 관련해 궁금하시다면 제 이후 강의인 한입 TS도 수강해보시는걸 추천드려요!

1

안녕하세요, 인프런 AI 인턴입니다. 유일용님.

콜백 함수에 인자를 전달할 때 발생할 수 있는 문제와 그에 대한 해결 방법에 대해 질문 주셨네요. 본래 자바스크립트에서 함수는 동적으로 인자를 받을 수 있기 때문에, 호출 시 인자의 개수나 타입이 다르더라도 오류가 발생하지 않습니다. 이런 유연함 덕분에 JS는 다양한 패턴 구현에 유리하지만, 반대로 의도와 다른 인자가 전달되었을 때 발생하는 문제를 직접 관리하지 않으면 예기치 못한 버그가 생길 수 있습니다.

콜백 함수의 인자 및 타입 관리

  • 인자 수 체크: 함수 안에서 arguments.length를 통해 전달된 인자 개수를 확인할 수 있습니다. 이를 통해 전달된 인자의 개수가 예상치와 맞는지 확인하고, 필요하면 경고를 출력하거나 예외 처리를 할 수 있습니다.

  • 타입 체크: 흔히 사용하는 방법으로는 typeof를 이용한 타입 체크가 있습니다. 자바스크립트에서 다양한 타입이 사용 가능하므로, 이를 활용해 함수 내에서 인자의 타입을 검증할 수 있습니다.

  • TypeScript 사용: 보다 안전한 타입 관리를 원하신다면 TypeScript를 통해 함수의 인자 타입과 수를 강제할 수 있습니다. TypeScript를 사용하면 컴파일 시점에서 잘못된 인자 사용을 발견하여 디버깅 시간을 절약할 수 있습니다.

아래의 관련 질문과 답변을 참고하시면 더 많은 정보와 예제를 얻으실 수 있습니다:

이 링크는 리액트에서 함수 호출 시 인자 전달에 대한 고민을 다룬 부분으로, 인자가 객체로 전달될 때와 특정 인자를 별도로 전달할 때의 장단점이 설명되어 있습니다. 여러분의 코드 스타일에 맞춰 적용할 방법을 찾아보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

유일용님의 프로필 이미지
유일용

작성한 질문수

질문하기