2/25 이미지 처리

이미지

• preload: 미리 로딩 해놓고 스테이트에 저장해놨다가 보여줌
  다음과 같이 처리한다.

 useEffect(() => {
    const img = new Image(); // img 태그 만들기
    img.src =
      "https://codebootcamp.co.kr/images/projects/contents/project_3-2_contents_gif.webp";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);
   const onClickImageLoad = () => {
    setLoaded(true);
  };
  
  return (
  	 {loaded && (
        <img src="https://codebootcamp.co.kr/images/projects/contents/project_3-2_contents_gif.webp" />
      )}
      <button onClick={onClickImageLoad}>이미지 일반로드</button>
  )

• react-lazyload
  반응 지연: 구성 요소, 이미지 또는 성능에 중요한 모든 것을 지연 로드한다.

• react-dropzone
  파일에 대한 HTML5 호환 드래그 앤 드롭 영역을 만드는 간단한 React 후크이다.

• react-avatar-editor
  Facebook 좋아요, 아바타/프로필 사진 구성 요소. 명확한 사용자 인터페이스를 사용하여 업로드한 이미지의 크기를 조정하고 자르고 회전한다.

• react-beautiful-dnd
  목록 을 위한 아름답고 접근 가능한 끌어서 놓기