어이없는 실수 1 - 커스텀 훅에서 함수, 변수 가져올때 구조분해 할당하기 (This expression is not callable)

This expression is not callable.  
Type '{ uploadImages: (files: File[]) => Promise<string[]>; }' has no call signatures.ts(2349)
const uploadImages: {  
uploadImages: (files: File[]) => Promise<string[]>;  
}

 

🧨 onChange 핸들러에서 useImageUpload 이라는 커스텀훅을 사용하려는데 타입 에러가 남 !!!

 

 

 

💥바보 아니야?
훅 가져올때 구조분해 할당 { } 을 안해줌;;;;;;; 

  const { uploadImages } = useUploadImages();

1. "This expression is not callable"
        - "이 표현식은 호출할 수 없습니다"라는 뜻이에요.
    - 즉, `uploadImages`가 함수가 아니기 때문에 `uploadImages(files)`처럼 호출하려고 하면 문제가 발생한다는 의미입니다.

2. `Type '{ uploadImages: (files: File[]) => Promise<string[]>; }'`
        - `uploadImages`가 사실 **객체**이고, 이 객체 내부에 `uploadImages`라는 메서드가 포함되어 있다는 뜻이에요.

3. "has no call signatures"
        - "호출 시그니처가 없습니다"라는 뜻인데, 이는 `uploadImages`가 함수가 아니기 때문에 `()`로 호출할 수 없다는 것을 말합니다.

결론적으로, `uploadImages` 자체가 함수가 아니라 객체라는 점을 알려줍니다.

에러 메시지에서 배울 수 있는 점

이번 에러를 통해 다음을 기억하면 좋아요:

- 타입 정보에 주목→ 에러 메시지에 반환된 값의 타입이 명시되는 경우가 많으니, 타입을 통해 무엇이 잘못되었는지 파악 가능.
- 구조 분해 할당 여부 확인→ 훅이나 객체에서 값을 사용할 때는 구조 분해 할당이 필요한지 항상 점검.

 

📌훅에서 반환하는게 1개 값일 경우에는 구조분해 할당 없이 { } 바로 써줄수있다

  const uploadImages = useUploadImages();