-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
안녕하세요 개인 프로젝트를 하는데 같은 함수 호출이 여러번 됩니다.
21.01.29 22:30 작성 조회수 236
0
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]}
</Avatar>
</Upload>
</ImgCrop>
</Form.Item>
<Form.Item label={<Text strong>이메일</Text>}>
<Text type="secondary">{me?.email}</Text>
</Form.Item>
<Form.Item label={<Text strong>닉네임</Text>}>
<Input
value={nickname}
onChange={onChangeNickname}
maxLength="20"
suffix={<Text type="secondary">{` ${nickname.length} / 20`}</Text>}
/>
<Button type="primary" onClick={onSubmitNickname} loading={changeNicknameLoading} disabled={me?.nickname === nickname}>
변경
</Button>
</Form.Item>
<Form.Item label={<Text strong>자기소개</Text>}>
<TextArea
placeholder="당신을 멋지게 소개해보세요!"
value={intro}
onChange={onChangeIntro}
rows="5"
spellCheck={false}
style={{ resize: 'none' }}
showCount
maxLength="500"
/>
</Form.Item>
<Form.Item style={{ textAlign: 'center' }}>
<Button
type="primary"
shape="round"
size="large"
onClick={onSubmitChangeIntro}
loading={changeIntroLoading}
disabled={me?.introduction === intro}
style={{
width: 200,
}}
>
저장
</Button>
</Form.Item>
</Form>
</Col>
</Row>
);
};
export default ProfileForm;
강의를 듣고 나서 개인 프로젝트를 만드는 중인데, antd의 Upload 컴포넌트를 이용해서 이미지 업로드를 구현했습니다. 그런데 이미지를 업로드하면 onUpload 함수가 3번 실행됩니다. beforeUpload는 1번만 실행되는데, onUpload 만 3번 실행이 됩니다. 오늘 하루종일 찾아봤는데 문제점을 모르겠습니다. 혹시 어디가 문제일까요?
답변을 작성해보세요.
0
답변 1