inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

비디오 업로드 FORM 만들기 (1)

Dropzone 같은 경우에는 설명해주시면서 강의해주시면 더 좋을것같아요!

386

릴롱궤

작성한 질문수 19

2

Dropzone에대해서 이해못한체로 따라서 치기만 하니까 약간 답답해서..ㅎㅎㅎ getRootprops, getInputProps 를 어떻게 사용하는 건지 알려주시면 감사하겠습니다!

redux react mongodb nodejs

답변 2

4

John Ahn

안녕하세요  릴롱궤님 ~    ㅎㅎ 

릴롱궤는 뜻이 있는건가요 ? ㅎㅎ 



우선   getRootprops, getInputProps  이 두개에 대해서 설명을 드릴게요 ! 

우선 props라는 것을 보면 이게 어떤거 같다는 생각이 드시나요 ?

리액트에서는 자녀 컴포넌트에게 필요한 정보를 넘겨 줄때 props를 사용을 하죠 ! 

그래서 이 두개는 dropzone을 쓸때 필요한 정보들이 담겨있는것이라고 먼저 유추할수 있습니다.

그래서 제가 직접 console.log를 찍어봤어요 

우선  getRootprops는요 

이렇게 나오는데요 

보면  각각 Event들이 일어났을때 (이미지를 dropzone에 내려놨을때나 dropzone을 클릭했을때 등등)  어떻게 대응해야 할지에 대한 정보가 들어있네요 ! 

그리고 getInputProps 은요 

여기는 보시면 처음에 accept 같은경우는 어떠한 파일을 받을지를 알려주는 건데요 
undefined 로 되있으니깐  모두다 받는다는 것입니다.
하지만 저희가 이 dropzone은 image만 받게 하고 싶다면 
 accept: 'image/*' 이렇게 해주면 됩니다 ! 
autoComplete은  자동 완성기능을 없애주는 것이며 
multiple은 파일을 여러개 한번에 올릴것인지에 관한것인데 현재는 false 가 되어있네요 ^^
이렇식으로 정보를 담고 있는 props 입니다 ~! 

0

릴롱궤

감사합니다 ! 강의 잘 듣고 있습니다. ㅎㅎ 좋은 강의 올려주셔서 감사합니다! ㅎㅎ

릴롱궤는 말라위라는 아프리카 섬나라의 수도이름인데.. 초등학교때부터 그냥 입에 익어서 닉네임으로 쓰고있어요 ㅎㅎ

npm i하면 바로, 라이브러리 오류없이 받아지고, 구동되는 소스는 없나요?

0

52

1

ERROR in ./node_modules/antd/es/version/index.js 2:15-22

0

221

1

자료 없음

0

322

1

이미지 깨짐

0

336

1

npm run dev 동작 에러

0

304

1

npm run dev 동작 에러

0

295

1

npm run dev 동작에러납니다...

0

661

1

npm run dev 실행 오류

0

653

1

비디오 업로드, 로그인, 회원가입 504 error

0

1057

1

시작부터 오류생기시는 분들 해결법입니다.

1

467

1

오류 해결 공유

0

459

1

npm install 에러 질문드립니다.

0

1121

2

아예 몽고DB에 연결한다고만 하고 연결이 안되고 있습니다.

0

550

1

해당 오류 해결 방법 좀 알려주세요 ㅠㅠ

0

516

1

로컬스토리지에 대한 질문입니다!!

0

515

0

video가 안 나타나는 문제

0

894

1

ffmpeg 설치 후 cannot read property 'format' of undefined 500 에러 해결

0

471

0

typeError or 콘솔 500 뜨는분..

0

336

0

npm run dev 관련 오류

0

578

1

답글이 달리지않고 디비에도 저장되지않으며 새로고침이 됩니다.

0

246

0

useState 자동 생성

0

347

1

TypeError: Cannot read properties of undefined (reading 'format')

0

1246

2

userData undefined / state에 user.userData가 없습니다.

0

248

0

antd Input background color 변경

0

242

0