Next js (넥스트 js)- Hook 3편 - useDropZone

 

1편 useRef

2편 use Effect

 

 

---

3편은 파일을 드래그 드롭, 선택 을 쉽게 해주는 Hook 이다.

​

하지만 구조가 좀 특이하여,

(+새로운 점을 깨달으면서)

​

그 내용에 대해서 기술해보려 한다.

​

​

기본적인 구조는 아래와 같다.

 

 

import { useDropzone } from "react-dropzone";


const {
    getRootProps: getRootFile,
    getInputProps: getInputFile,
    isDragActive: isFileDragActive,
  } = useDropzone({
    accept: {
      "image/*": [],
    },
    onDrop: (acceptedFiles) => {
      //* 파일 올렸을 때 작동 할 부분
    },
  });

 

 

어... ?

난 여기서 부터 이상했다.

어떻게 변수명이 없지 ??

​

하지만 이는 useDropZone의 특성 이고,

(즉 뭐 따로 정의하지 않아도 자동 반환 된다는 의미)

​

직접 사용하는 방법은

​

getRootProps : 파일의 드롭존을 지정할 떄 사용 (파일을 끌어다 넣을 떄)

getInputProps : 파일을 "선택" 할 때 사용

isDragActive : 지금 파일이 드래그 중인지 체크할 때 사용.

​

위의 세 함수를 사용하는 방식으로 사용 한다.

​

이렇게 생겼다.

 

 

 

 

아래는 위의 세 함수를 사용해서 구현 한 코드이다.

 

 

<Grid item md={8} xs={12}>
            <Box
              sx={{
                alignItems: "center",
                border: 1,
                borderRadius: 1,
                borderStyle: "dashed",
                borderColor: "divider",
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "center",
                outline: "none",
                p: 1,
                ...(isDragActive && {
                  backgroundColor: "action.active",
                  opacity: 0.5,
                }),
                "&:hover": {
                  backgroundColor: "action.hover",
                  cursor: "pointer",
                  opacity: 0.5,
                },
              }}
              {...getRootProps()}
            >
              <input {...getInputProps()} />
              <Box
                sx={{
                  "& img": {
                    width: 100,
                  },
                }}
              >
                <img
                  alt="Select file"
                  src="/static/undraw_add_file2_gvbb.svg"
                />
              </Box>
            </Box>

 

짜잔

​

​

그럼 아래는 뭘까 ?

 

 

 getRootProps: getRootFile,
    getInputProps: getInputFile,
    isDragActive: isFileDragActive,

 

 

이거는 구조 분해 할당이라는 건데,

위에서 설명한 세 함수를 -> 내가 사용하고 싶은 함수명으로 변경하여 사용하는 거다.

​

​

무튼 요약 하자면,

​

1)useDropZone 직접 호출

 

import { useDropzone } from "react-dropzone";


const {
    getRootProps: getRootFile,
    getInputProps: getInputFile,
    isDragActive: isFileDragActive,
  } = useDropzone({
    accept: {
      "image/*": [],
    },
    onDrop: (acceptedFiles) => {
      //* 파일 올렸을 때 작동 할 부분
    },
  });

 

 

2) useDropZone 캡슐화

 

 

const createDropzone = (onDrop) => {
  return useDropzone({
    accept: {
      "image/*": [],
    },
    onDrop,
  });
};


const dropzone1 = createDropzone((files) => { /* 첫 번째 Drop 처리 */ });

 

 

 

- 1번과 2번의 방식은 똑같다는 것.

- 정의를 하지 않아도 useDropZone에서 기본적으로 주는 함수는 사용 가능하다는 것

​

​

도움이 되었다면

좋아요와 댓글 부탁드립니다.