[React] 게시판 수정 - 첨부파일 삭제하기 (firebase, map, filter, spread)

firebase, map, filter을 이용하여 첨부파일 삭제하는 기능을 구현하였다.

삭제 버튼을 누르면 Modal창이 나오면서 '파일을 삭제하겠습니까?' 라는 문구가 나오고,

ok 버튼을 누르면 해당 파일이 삭제가 된다.

 

 

# firebase 

collectionRef -> notice라는 컬렉션에서 해당 게시물의 userId(uid)를 가져와 collectionRef에 저장한다.  

const userId = useParams().id;
const collectionRef = doc(db,"notice",userId);

 

updateDoc -> 파이어베이스에서 전체 문서를 업데이트를 하지 않고 일부 필드를 업데이트 하려면 updateDoc() 메서드를 사용한다.

 

 

< 과정 >

 

fileName에 filter을 걸어 조건에 일치하는 모든 요소를 모아서 새로운 배열로 반환해준다.

1 ) filter -> 선택한 파일(삭제 예정)과 notice.fileName이 일치하지 않는 파일이름을 result 변수에 저장한다.

 

const result =   
    notice.fileName.filter(   
        (f) => f !== name
);

 

 

2) updateDoc -> collectionRef에서 수정하려는 필드를 넣어준다.

 

 updateDoc(
    collectionRef,
    {
        fileName:
            result,
    }
);

 

 

3) 삭제한 파일을 useState에 있는 notice와 fileName에 저장하기 위해 재랜더링이 필요함

spread 연산자를 사용하여 setNotice에 기존에 있는 Notice를 복사해주고, 삭제한 파일 외의 값을 넣어준다.

그리고 setFileName에도 삭제한 파일 외의 값을 넣어준다.

 

const [fileName, setFileName] = useState<Array<string>>([]);
const [notice, setNotice] = useState<NoticeModel.INoticeModel>();

 

export namespace NoticeModel {
    export interface INoticeModel {
        id: string;
        uid: string;
        title: string;
        content: string;
        writer: Array<ManagementModel.IUserModel>;
        created: string;
        fileName?: Array<string>;
        department: string;
        url: string;
        page: number;
    }
}

 

setNotice(
  {
      ...notice,
      fileName:
          result,
  }
  
  );
    setFileName(
        result
  );

 

 

 

< 부분 전체코드 >

 

 {fileName && (
    <Row justify="center" align="middle">
        <Col
            span={22}
            style={{
                textAlign: "left",
            }}
        >
            <Form.Item name="fileName">
                {map(
                    notice.fileName,
                    (name, index) => {
                        return (
                            <Col span={22}>
                                <p>
                                    {name
                                        ? name
                                        : ""}
                                </p>
                                <Button
                                    key={index}
                                    danger
                                    style={{
                                        marginBottom:
                                            "7px",
                                        position:
                                            "absolute",
                                        top: 0,
                                        right: 0,
                                        zIndex: 1,
                                    }}
                                    type="default"
                                    onClick={() => {
                                        Modal.confirm(
                                            {
                                                title: "파일을 삭제하시겠습니까?",
                                                okText: "확인",
                                                cancelText:
                                                    "취소",
                                                onOk: async () => {
                                                    const collectionRef = doc(db,"notice",userId);
                                                    const result =   
                                                        notice.fileName.filter(   
                                                            (f) => f !== name
                                                        );
                                                    updateDoc(
                                                        collectionRef,
                                                        {
                                                            fileName:
                                                                result,
                                                        }
                                                    );
                                                    setNotice(
                                                        {
                                                            ...notice,
                                                            fileName:
                                                                result,
                                                        }
                                                    );
                                                    setFileName(
                                                        result
                                                    );
                                                },
                                            }
                                        );
                                    }}
                                >
                                    삭제
                                </Button>
                            </Col>
                        );
                    }
                )}
            </Form.Item>
        </Col>
    </Row>
)}