안녕하세요 개인 프로젝트를 하는데 같은 함수 호출이 여러번 됩니다.

Question

import React , { useEffect , useState , useMemo , useCallback , useRef } from ' react '; import { useSelector , useDispatch } from ' react-redux '; import { Row , Col , Button , Form , Input , Typography , Modal , Avatar , Upload , message } from ' antd '; import { useDropzone } from ' react-dropzone '; import ImgCrop from ' antd-img-crop '; import useInput from ' ./hooks/useInput '; import { CHANGE_PROFILE_REQUEST , CHANGE_NICKNAME_REQUEST , CHANGE_INTRO_REQUEST } from ' ../reducers/user '; const { Dragger } = Upload ; const { TextArea } = Input ; const { Text } = Typography ; const ProfileForm = () => { const { me , changeProfileLoading , changeNicknameLoading , changeNicknameDone , changeNicknameError , changeIntroLoading , changeIntroDone , changeIntroError , } = useSelector (( state ) => state . user ) ; const [ nickname , onChangeNickname ] = useInput ( me ?. nickname || '' ) ; const [ intro , onChangeIntro ] = useInput ( me ?. introduction || '' ) ; const [ profileImage , onChangeProfileImage , setProfileImage ] = useInput () ; const dispatch = useDispatch () ; useEffect (() => { if ( changeNicknameError ) { Modal . error ({ content : ' 닉네임 변경 중에 오류가 발생했어요. ' , }) ; } } , [ changeNicknameError ]) ; useEffect (() => { if ( changeNicknameDone ) { Modal . success ({ content : ' 닉네임을 변경했어요! ' , }) ; } } , [ changeNicknameDone ]) ; useEffect (() => { if ( changeIntroError ) { Modal . error ({ content : ' 자기소개 변경 중에 오류가 발생했어요. ' , }) ; } } , [ changeIntroError ]) ; useEffect (() => { if ( changeIntroDone ) { Modal . success ({ content : ' 자기소개를 변경했어요! ' , }) ; } } , [ changeIntroDone ]) ; const beforeUpload = useCallback (( file ) => { console . log ( ' beforeUpload ' ) ; if ( file . type !== ' image/jpg ' && file . type !== ' image/jpeg ' && file . type !== ' image/png ' ) { message . error ( ' jpg jpeg png 사진만 가능해요! ' ) ; return false ; } if ( file . size > 2 * 1024 * 1024 ) { message . error ( ' 프로필 이미지는 2MB 이하만 가능해요! ' ) ; return false ; } setProfileImage ( file ) ; return true ; }) ; const onUpload = useCallback ( ( files ) => { console . log ( ' onUpload ' ) ; if ( ! changeProfileLoading ) { const imageFormData = new FormData () ; imageFormData . append ( ' image ' , profileImage ) ; console . log ( profileImage ) ; dispatch ({ type : CHANGE_PROFILE_REQUEST , data : imageFormData , }) ; } } , [ profileImage , changeProfileLoading ] ) ; const onSubmitNickname = useCallback (() => { dispatch ({ type : CHANGE_NICKNAME_REQUEST , data : nickname , }) ; } , [ nickname ]) ; const onSubmitChangeIntro = useCallback (() => { dispatch ({ type : CHANGE_INTRO_REQUEST , data : intro , }) ; } , [ intro ]) ; const style = useMemo (() => ({ marginBottom : ' 20px ' , border : ' 1px solid #d9d9d9 ' , padding : ' 20px ' }) , []) ; return ( < Row justify = " center " > < Col xs = { 24 } md = { 12 } > < Form style = { style } layout = " vertical " > < Form.Item style = { { textAlign : ' center ' } } > < ImgCrop rotate quality = " 0.8 " modalTitle = " 이미지 조정 " modalOk = " 저장 " modalCancel = " 취소 " > < Upload showUploadList = { false } accept = " .jpg,.jpeg,.png " onChange = { onUpload } beforeUpload = { beforeUpload } > < Avatar src = { me ?. profile ? ` http://localhost:3100/ ${ me ?. profile } ` : null } size = { 256 } > { me ?. profile ? null : me ?. nickname [ 0 ] } < Form.Item label = { < Text strong > 이메일 } > < Text type = " secondary " > { me ?. email } < Form.Item label = { < Text strong > 닉네임 } > < Input value = { nickname } onChange = { onChangeNickname } maxLength = " 20 " suffix = { < Text type = " secondary " > { ` ${ nickname . length } / 20 ` } } /> < Button type = " primary " onClick = { onSubmitNickname } loading = { changeNicknameLoading } disabled = { me ?. nickname === nickname } > 변경 < Form.Item label = { < Text strong > 자기소개 } > < TextArea placeholder = " 당신을 멋지게 소개해보세요! " value = { intro } onChange = { onChangeIntro } rows = " 5 " spellCheck = { false } style = { { resize : ' none ' } } showCount maxLength = " 500 " /> < Form.Item style = { { textAlign : ' center ' } } > < Button type = " primary " shape = " round " size = " large " onClick = { onSubmitChangeIntro } loading = { changeIntroLoading } disabled = { me ?. introduction === intro } style = { { width : 200 , } } > 저장 ) ; } ; export default ProfileForm ; 강의를 듣고 나서 개인 프로젝트를 만드는 중인데, antd의 Upload 컴포넌트를 이용해서 이미지 업로드를 구현했습니다. 그런데 이미지를 업로드하면 onUpload 함수가 3번 실행됩니다. beforeUpload는 1번만 실행되는데, onUpload 만 3번 실행이 됩니다. 오늘 하루종일 찾아봤는데 문제점을 모르겠습니다. 혹시 어디가 문제일까요?

1ncursio · Answer

바로 해결했네요 onUpload에서 처리하지않고 그냥 beforeUpload에서 처리했습니당