[React] 240125 Quill(3) 첨부파일 추가

이슬기·2024년 1월 25일

React

목록 보기
6/13

BoardFileInsert 추가

import React from 'react';
// files는 props로 받아온다
// -> 주의사항) 내리는 건 가능하지만 올리는 건 불가함
const BoardFileInsert = ({files}) => {
    return (
        <div style={{display:'block', border:'1px solid lightGray', borderRadius:'10px', minHeight:'60px', padding:'5px'}}>
            <div style={{textAlign:"left", padding: "2px 5px 2px 5px"}}>첨부사진</div>
            {
                files.map((item, Index) => (
                <div type='text' id='fileUpload' style={{padding:"5px"}} key={item}>{item}</div>
                ))
            }
        </div>
    );
};

export default BoardFileInsert;

BoardWriteForm에 BoardFileInsert 추가

<BoardFileInsert files={files} />

QuillEditor에 추가

const QuillEditor = ({ value, handleContent, quillRef, handleFiles, memoTemp }) => {

아래 코드를 사용해야 새로고침이 발생하지 않고 사진 첨부 후 추가로 사진 첨부했을 때 이전 사진첨부 파일이 사라지지 않고 누적된다.

 memoTemp.push(res.data);
// a.png, b.png, c.png
handleFiles(JSON.parse(JSON.stringify(memoTemp)).join(', '));
}, [quillRef, memoTemp, handleFiles]); /////// end of callback

0개의 댓글