React_업로드 Form 만들기

1. 업로드 페이지 만들기

컴포넌트 파일 생성 > functional component(rfce)  ( React import, export default )

 

2. 업로드 페이지 Route 생성

App.js에서 <Route/> 추가

 

3. 업로드 페이지 Header Tab 추가4. 폼 만들기5. 파일 올리는 zone

 1) npm i react-dropzone --save

 2) 

<Dropzone onDrop multiple maxSize >

                        { ({getRootProps, getInputProps}) =>(

                            <div style={{width:'300px', height:'240px', border:'1px solid lightgray', display:'flex',

                            alignItems:'center', justifyContent:'center'}} {...getRootProps()}>

                                <input {...getInputProps()} />

                                <Icon type="plus" style={{fontSize:'3rem'}}/>

                            </div>

                        )}

</Dropzone>

 

6. onChange Func

TitleInput, Description, PrivateSelect, CategorySelect >> onChange 함수