인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

재원허님의 프로필 이미지
재원허

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

게시글 불러오기

비로그인 상태에서 댓글 입력하면 댓글폼 개수만큼 alert가 발생합니다!

작성

·

123

0

import React, { useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';

import useInput from '../hooks/useInput';
import { ADD_COMMENT_REQUEST, ADD_COMMENT_RESET } from '../reducers/post';

const CommentForm = ({ post }) => {
  const dispatch = useDispatch();
  const { addCommentDone, addCommentLoading, addCommentError } = useSelector((state) => state.post);
  const [commentText, onChangeCommentText, setCommentText] = useInput('');

  useEffect(() => {
    if (addCommentDone) {
      setCommentText('');
    }
  }, [addCommentDone]);

  useEffect(() => {
    if (addCommentError) {
      alert(addCommentError);
      dispatch({ type: ADD_COMMENT_RESET });
    }
  }, [addCommentError]);

  const onSubmitComment = useCallback(() => {
    dispatch({
      type: ADD_COMMENT_REQUEST,
      data: { content: commentText, postId: post.id },
    });
  }, [commentText]);

  return (
    <Form onFinish={onSubmitComment}>
      <Form.Item style={{ position: 'relative', margin: 0 }}>
        <Input.TextArea value={commentText} onChange={onChangeCommentText} rows={4} />
        <Button
          style={{ position: 'absolute', right: 0, bottom: -40, zIndex: 1 }}
          type="primary"
          htmlType="submit"
          loading={addCommentLoading}ß
        >
          댓글 입력
        </Button>
      </Form.Item>
    </Form>
  );
};

CommentForm.propTypes = {
  post: PropTypes.object.isRequired,
};

export default CommentForm;

위 코드는 CommentForm 컴포넌트인데 비로그인 상태에서 댓글 입력 버튼을 클릭하면 ADD_COMMENT_FAILURE 액션이 실행되고

alert(addCommentError)를 알람 설정했습니다! 근데 이때 댓글폼을 세 개 열어 놓고 댓글 입력 버튼을 클릭하면 세 번 알람이 되더라구요..ㅠㅠㅠ 혹시 한 번만 알람되도록 설정하는 방법이 있을까하고 여쭤봅니다...ㅠ
ADD_COMMENT_RESET은 그냥 addCommentError: false로 바꿔주는 것 말고는 없습니다.

그리고 이번에 라이브러리 최신화한 것 감사합니다! 강의 내용은 아니지만 다름이 아니라 intersection 폴더에서 컴포넌트들 화살표 함수에서 함수 선언식으로 바꾸셨던데 이유가 있을까요??

 

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

alert 부분을 redux-saga의 catch 부분 안으로 넣으시면 됩니다. 사가는 하나뿐이라서 얼럿이 한번만 됩니다.

펑션으로 바꾼 이유는 eslint 룰이 그걸 권장하는 것으로 바뀌어서 그랬습니다.

재원허님의 프로필 이미지
재원허
질문자

그런 쉬운 방법이....!! 너무 컴포넌트에만 써야한다고 생각했네요.. 감사합니다!!

재원허님의 프로필 이미지
재원허

작성한 질문수

질문하기