[React] 게시글 이미지 업로드 구현하기

여러장 이미지 업로드 

    const [showImg, setShowImg] = useState([]);
    (...)
	function handleAddImg(e){  //이미지 업로드 preview
        const imgList = e.target.files; 
        let imgUrlList = [...showImg]; 
        for(let i = 0; i < imgList.length; i++){
            const currentImgUrl = URL.createObjectURL(imgList[i]);
            imgUrlList.push(currentImgUrl);
        }  
        if(imgUrlList.length > 6){ //최대 이미지 갯수 설정 
            imgUrlList = imgUrlList.slice(0, 6);
        }
        setShowImg(imgUrlList); 
    }

    function handleDeleteImg(image){ //이미지 삭제
        setShowImg(showImg.filter((it)=> it !== image ));  
    }
    
    (...)
            <label htmlFor='img' className='addImg' ><span class="material-symbols-outlined">
                add_a_photo
                </span></label> 
                {showImg.map((image, idx)=>(
                    <div key={idx} className='imgBox'>
                        <img src={image} alt={`img${idx}`} />
                        <button onClick={()=>handleDeleteImg(image)}><span class="material-symbols-outlined">
                            delete
                            </span></button>
                    </div>
                ))}
                <input id='img' style={{display:'none'}}  type='file' accept='/image/*' multiple  onChange={handleAddImg}/>

 

input은 display:none을 하고 label에 디자인 요소를 넣으면 업로드 버튼을 꾸밀 수 있다. 
input에 multiple 속성을 넣어야 여러장을 추가할 수 있다.