TIL-22.10.30

fileInput

 -비제어 컴포넌트로 사용

   <input>에 value prop 지정X

 - 이벤트 객체의 target.value 값이 아니라, target.files 값을 사용

  <input type="file" ~ />

 

 

 

 

useRef()

 - DOM노드는 반드시 렌더링이 끝나야 생성됨

 - ref객체의 current값도 화면에 컴포넌트가 렌더링됐을때만 존재

    cf) 조건부 렌더링 등으로 해당 컴포넌트가 렌더링되지않으면 ref값이 없다

 

사용절차)

1. Ref객체 생성

import { useRef } from 'react'

// ...

const ref = useRef();  //Ref 객체 생성

 

2. ref prop 사용하기

<div ref={ref} />  //ref prop에 앞서 생성한 Ref객체 내려줌

 

3. Ref객체에서 DOM노트 참조하기

const node = ref.current;  //Ref객체의 current 프로퍼티 사용해서 DOM노트 참조

 --> 변수 node는 Ref객체 내려준 <div>태그 가리킴

 

 

 

 

URL.createObjectURL() 함수로 object URL 생성

 - 리턴값으로 해당파일을 주소처럼 사용할수있는 문자열 리턴(웹브라우저는 메모리를 할당)

 - File 객체를 object URL로 만들면 파일에 대한 주소 생성가능. 즉, 사용자 컴퓨터에 있는 파일을 주소로 사용가능하다는것

 

 *파일인풋에 초기화 버튼 만들기

  - FileInput의 value속성은 사용자만 직접 수정할수있고,

    JS로 수정하려면 '빈문자열'으로만 수정가능

   즉, value속성을 '빈문자열'로 바꿔주면 선택한 파일이 초기화

 

object URL을 만들면 웹브라우저는 메모리를 할당하고, 파일에 해당 주소를 생성

-> 우리가 만든 FileInput 컴포넌트는 렌더링 과정에서 리액트 외부 상태를 변경하게 되는것

-> 즉, 사이드이펙트 발생

 

사이드 이펙트 정리하기

revokeObjectURL () : 할당메모리 해제

 - 파일 선택마다, 메모리를 할당하기만 한다면 메모리 낭비문제 발생

 - useEffect()는 사이드 이펙트 만들고 난뒤 정리방법 제공, useEffect 함수내에 정리함수를 리턴해주면됨(리액트는 이 정리함수는 기억)

useEffect(() => {

if (!value) return;

const nextPreivew = URL.createObjectURL(value); //사이드이펙트 발생(웹브라우저가 메모리할당)

setPreview(nextPreivew); //세터함수

return () => {

//리액트는 디펜던시리스트 값이 변경되어 다시 콜백이 실행될때까지 이 정리함수 기억 다시 콜백이 실행되면 정리함수 실행후 콜백함수 실행

setPreview(); //preview 스테이트 초기화

URL.revokeObjectURL(nextPreivew); //object URL 정리

}; //정리함수

}, [value]);

 

--> 즉, 디펜던시리스트 값이 변경되어 새로이 콜백 실행할때, 새로운 콜백 실행 전, 기억해둔 정리함수가 실행되서 사이드이펙트를 정리함

 

 

 

 

 

 

async,  await

 - function 앞에 async 붙이면 해당 함수는 promise 반환

 - await는 async 함수 안에서만 동작

    JS는 await 키워드를 만나면 promise가 처리될때까지 기다림, 처리되면 그 이후 실행