31일차) [React/JS] 이미지미리보기(fileReader) / Promise / 이미지 라이브러리 /preLoad

✍이미지 미리보기

new FileReader()

new FileReader() 기능은 파일 객체를 이용해 내용을 읽고 사용자 컴퓨터에 저장하는 것을 가능하게 해주는 브라우저에서 지원해주는 기능.

new FileReader() 를 사용하면 new FileReader() 에 있는 기능 사용 가능

const onChangeFile =
    (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0];
      if (!file) return;

      const isValid = checkValidationFile(file);
      if (!isValid) return;

      // 1. 진짜 URL 생성
      const fileReader = new FileReader(); // 파일을 읽어오는 도구
      fileReader.readAsDataURL(file); // 해당 파일을 넣어주면 url로 만들어줌
      fileReader.onload = (data) => {
        // 파일 리더가 완성이 되면

        if (typeof data.target?.result === "string") {
          console.log(data.target.result);

          const tempUrls = [...imageUrls]; // 얕은 복사
          tempUrls[index] = data.target?.result;
          setImageUrls(tempUrls);

          const tempFiles = [...files];
          tempFiles[index] = file;
          setFiles(tempFiles);
        }
      };
    };

• readAsDataURL()

readAsDataURL()을 사용하면 Data URL을 얻을 수 있음

• onload()

onload에서는 파일을 읽고 생성된 Data URL이 target.result에 담기게 된다.

✍Promise & Promise.all()

// Promise
// Promise에서 resolve가 실행이 되면 종료, reject가 실행되면 오류

	const onClickPromise = async () => {
		const result1 = await new Promise((resolve, reject) => {
			setTimeout((resolve("3초 후 실행됩니다.")) => {}, 3000)
		})
		const result2 = await new Promise((resolve, reject) => {
			setTimeout((resolve("2초 후 실행됩니다.")) => {}, 2000)			
		})
		const result3 = await new Promise((resolve, reject) => {
			setTimeout((resolve("1초 후 실행됩니다.")) => {}, 1000)
		})
	};


// Promise.all()

	const onClickPromiseAll = async () => {
		const result = await Promise.all([
			setTimeout((resolve("3초 후 실행됩니다.")) => {}, 3000)
			setTimeout((resolve("2초 후 실행됩니다.")) => {}, 2000)
			setTimeout((resolve("1초 후 실행됩니다.")) => {}, 1000)
		])
	};

위의 promise는 result1이 3초후에 실행되고, result2, 2초 후 실행되고, result3이므로 총 6초

promise.all은 동시에 3개를 요청하고 모두 올 때까지 한번에 기다리기 때문에 총 3초가 걸린다.

✍lazyLoad

로딩을 바로하지않고 지연시켰다가 로딩을 나중에 해준다는 뜻
이미지가 보여져야 할 때마다 이미지를 로드하여 데이터를 받아옴
npm install --save react-lazy-load

✍PreLoad

페이지를 읽을때 미리 리소스를 받는 기술

예시코드

export default function ImagePreloadPage () {
	const [imgTag, setImgTag] = useState()
	const divRef = useRef(null)

	useEffect(() => {
		const img = new Image()
		img.src = "불러올 이미지 주소를 넣습니다."
		img.onload = () => {
			setImgTag(img)
		}
	}, [])

const onClickPreload = () => {
	if(imgTag) divRef.current?.appendChild(imgTag)
}


return (
	<div>
		<div ref={divRef}></div>
			<button onClick={onClickPreload}> 이미지 프리로드 </button>
	</div>
)
}

💡 그 외 이미지 라이브러리
React-dropzone

React-avator-editor

Google PageSpeed Insights
실제 배포를 진행하고 나서, 내가 배포한 페이지의 개선점을 찾을 때