useRef의 click 펑션에서 에러 질문입니다

다음과 같이 useRef의 current.click()을 해주려는데,

button을 눌렀을때 , TypeError가 발생합니다.

에러메세지는 이렇습니다... 그냥 바닐라 자바스크립트로, click이벤트 해보닌깐 문제없는데. function이 없다고 하는게 왜 그런지 이유를 잘 못찾겠습니다. 공식문서봐도 딱히 그런내용없고, current.focus()로 예문들이 있길래 해봣는데, text input에 그냥 focus하는거라 그런지 file input에는 안 먹히네요.

제로초님 코드랑 비교해봐도 왜 image.current.click()에서 에러가 나는지 모르겠습니다. 혹시 어떤걸 시도해보면 될까요?

TypeError: imageInput.current.click is not a function

(anonymous function)
./components/postform.js:27
  24 | 
 25 | const onClickImageUpload = useCallback(() => {
  26 |  console.log(imageInput.current);
> 27 |  imageInput.current.click();
  | ^  28 | }, [imageInput.current]);
  29 | 
 30 | const onChangeImage = useCallback((e) => {

import React, { useState, useCallback, useEffect, useRef } from "react";
import { Form, Input, Button } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { ADD_POST_REQUEST, UPLOAD_IMAGES_REQUEST } from "../reducers/post";

const PostForm = () => {
 const { imagePaths, isAddingPost, isAddedPost } = useSelector(
(state) => state.post
);
 const [text, setText] = useState("");
 const dispatch = useDispatch();
 const imageInput = useRef();

 const onChangeText = useCallback((e) => {
setText(e.target.value);
}, []);

 const onSubmitForm = useCallback(() => {
 if (!text || !text.trim()) {
 return alert("please write something");
}
dispatch({ type: ADD_POST_REQUEST, data: { content: text.trim() } });
}, [text]);

 const onClickImageUpload = useCallback(() => {
console.log(imageInput.current);
imageInput.current.click();
}, [imageInput.current]);

 const onChangeImage = useCallback((e) => {
console.log(e.target.files);
 const imageFormData = new FormData();
[].forEach.call(e.target.files, (currentValue) => {
imageFormData.append(image, currentValue);
});
dispatch({
type: UPLOAD_IMAGES_REQUEST,
data: imageFormData,
});
}, []);

useEffect(() => {
 if (isAddedPost) {
setText("");
}
}, [isAddedPost]);

 return (
<React.Fragment>
<Form encType="multipart/form-data" onFinish={onSubmitForm}>
<Form.Item>
<Input.TextArea
maxLength={140}
placeholder="What is your latest news?"
value={text}
onChange={onChangeText}
></Input.TextArea>
</Form.Item>

<Input type="file" multiple ref={imageInput} onChange={onChangeImage} />
<div>
{imagePaths.map((x, i) => {
 return (
<div key={i} style={{ display: inline - block }}>
<img
src={"localhost:/3065/" + x}
alt={x}
style={{ width: "200px" }}
></img>
</div>
);
})}
</div>
<Button onClick={onClickImageUpload}>Upload Image</Button>
<Button
htmlType="submit"
type="primary"
style={{ float: "right" }}
loading={isAddingPost}
>
Submit
</Button>
</Form>
</React.Fragment>
);
};

export default PostForm;

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