4주차 모바일 기능

원래 계획

https://docs.google.com/spreadsheets/d/1NXSSNFq6yb-L3zPpxX4q9ZArIXbhyl7T_jdXg_Dw5rs/edit#gid=1709744959

수정된 계획

1주차 모바일 디자인 11-17
2주차 모바일 디자인 18-25
3주차 모바일 기능 26-2/1
4주차 모바일 기능 2/1-2/8
5주차 웹 디자인 2/1-2/8
6주차 웹 기능
7-9주차 DB 연결

새로 배운 것들

파일 업로드하기

<div style={{display: 'flex'}}>
    <div className="filebox" style={{flex: '1'}}>
              <label htmlFor="ex_file" >    
              <img src={file_btn}  style={{display:'inline', marginTop:'5px', transform: 'translateY(10px)', width: '96px'}}/>
              </label>
              <input type="file" onChange={fileUpload} id="ex_file" ref ={inputImg} style={{visibility: 'hidden', height: '0px'}}/>
    </div>

    <div className="inputdiv" id="inputdivin" 
    style={{ borderBottom: '1px solid rgb(224 224 224)', width: '190px', flex: '4'}}>
        
    <div style={{display:'inline'}} id="inputdivingam">
    <input type="text" id="ingam" ref={ingam} className="textcont" style={{border:'none', width: '190px'}} readonly=""/>
    </div>

label태그와 input태그를 사용한다
html에서는 label태그의 for 속성과
input태그의 id에 같은 이름, type='file'을 넣으면 함께 사용할 수 있다
label, input을 동시에 써야 파일을 선택하는 팝업창이 뜬다

-> react에서는 label태그의 for속성 대신 htmlFor을 써야한다
-> react에서는 두 태그를 DOM으로 잡을 수 없으므로 useRef를 이용해 주소값을 활용한다

useRef 사용법

import {useRef} from react

const inputImg = useRef (null) //초기값

<input ref = {inputImg}></input>//inputImg 변수에 해당 태그를 넣는다 

inputImg에는 {current: input#ex_file}라는 객체가 들어간다 
그러므로 활용 시 inputImg.current로 사용하면 된다

inputImg.current.value 에 파일 제목이 들어있다

inputImg.current.files에 FileList가 들어있다
신기한 점은 파일 선택을 새로하면 FileList에 추가되는 게 아니라 새로운 파일로 갱신된다

여러 파일을 선택하고 싶으면
https://tsdn.tabslab.com/ko/tabsupload/5.1/html/aeff00d5-9580-4f01-b91d-31d601338782.htm

<input type='file' multiple>

이렇게 multiple 속성을 추가해주면 된다