🧑🏻‍💻시니어개발자🧑🏻‍💻

링크서비스 등록화면에서 Input Value을 가져오는 방법을 알았다.

그럼 이미지 등록을 위한 Drag&Drop 이미지 업로드를 제작해보자.

#11. React화면에서 각 항목의 Input Value을 가져오기

⎟⎜이미지Drag Drop기능 및 Preview 기능

⌘ links.create.jsx ( 위치: linkservice/client/src/component/links.create.jsx)

---------------------------------------------------------------------------------------------------

1)   이미지를 미리 볼 수 있는 기능

     preview const 선언

const [preview, setPreview] = useState('assets/default.jpg')

📌 이미지가 없을 때 default이미지를 보여 주기 위해서 public/assets/default.jpg을 넣어둔다.

( 샘플 이미지는 인터넷 검색으로 적당한 곳에서 가져오면 된다.)

   img src 에 preview const을 지정

<div className="img_wrap" > 
            <img src =  {preview}
                alt='이미지' className="img_box" />
            <input multiple={false} name='imageurl'/>
 </div>

   handleChange() 함수에 target name이 imageurl일 경우 setPreview값을 셋팅 한다.

const handleChange = (e) => {
        const { name, value } = e.target
        setValues((prevValues) => ({
            ...prevValues,
            [name]: value,
        }))
        
       // 이 부분을 추가
        if (e.target.name === 'imageurl') {
            setPreview(e.target.value)
        }
    }

2)   이미지 Drag&Drop기능 구현

Drag Drop기능은 React에서 제공되는 react-dropzone 라이브러리를 사용한다.

📌 공식문서 : https://github.com/react-dropzone/react-dropzone

터미널에서 yarn add react-dropzone 라이브러리를 설치한 다음,

useDropzone을 선언한다.

import {useDropzone} from 'react-dropzone'

image state을 선언한다.

const [image, setImage] = useState(null)

onDrop 관련 함수를 작성한다.

onDrop함수는 이미지 drop후 처리해야 하는 작업내용을 반영하면 된다.

여기서는 파일을 읽어 처리는 로직을 반영 한다.

function onDrop(acceptedFiles) {
        const reader = new FileReader();
        const file = acceptedFiles
        
		// 이미지 파일을 읽어 setImage 로 저장
        if (file) {
          reader.readAsDataURL(file[0]);
          setImage(file[0]);
        }
       // onDrop되면 preview 되게 처리하고, 기존 이미지 url정보를 공백처리한다.
        reader.onload = (e) => {
            setPreview(reader.result);
            document.getElementsByName("imageurl")[0].value = ''
        };
    }

readAsDataURL 메소드로 image파일을 base64로 인코딩 된 값으로  반환한다. 그리고 그 결과를 setPreview(미리보기) 에 값을 넣고, setImage은 이미지 파일정보를 보관한다. 마지막으로 이미지를 직접 등록했으므로,

링크정보 URL(imageurl) 항목을 비운다.

Dropzone의 Props인 getRootProps와 getInputProps지정한다.

const {getRootProps, getInputProps} = useDropzone({onDrop})

이미지 영역(zone)의 div에 props들을 선언한다.

<div className="img_wrap" {...getRootProps()} > 
            <img src =  {preview}
                alt='이미지' className="img_box" />
            <input {...getInputProps()} multiple={false} name='imageurl'/>
</div>

📌(중요) getRootProps는 이미지 영역의 div에 ,    getInputProps는 input에 선언하면 된다.

이미지 저장하기 위해서 handleSubmit에 관련 내용을 추가한다.

이미지가 있을 경우 formData형태로 업로드를 진행한다.

linkService.createLink(values).then(
            (res) => {
                if (image) {
                    //이미지 항목이 있을경우 formData에 넣어 API을 호출한다.
                    formData.append('image', image)
                    linkService.uploadImage(formData).then(
                        (res)=> {// console.log(res) 
                        }
                )} 
                alert(res.data.message)
                window.location.reload();            
            }
        )

다음편에는 실제 DB 와 이미지 파일 저장 (등록) 기능을 만들어 보자.