LearnFit

 YouTube, Image Previews in React with FileReader

서원석님의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

#전체

#개발자

#프론트엔드

#react tutorial

#image preview

#javascript filereader

#file reader class

00:01이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25코드 살펴보기 시작

01:02input file type을 추가합니다.

01:51label 태그를 추가합니다(input file type은 display: none 처리)

02:05button에 적용된 스타일 태그(동그라미)

02:17useRef로 fileInputRef 생성(input에 접근하기 위한) input file type은 항상 uncontrolled components인데요, 아래 링크를 통해 uncontrolled component인 input file type을 어떻게 다뤄야하는지 좀 더 자세히 확인할 수 있어요. 링크: https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag

02:35useRef에 타입 지정(input file type이므로 HTMLInputElement로 지정)

02:46Add Image 버튼 클릭 시에 fileInputRef를 통해 input file type이 클릭되도록 onClick 이벤트 핸들러 구현

03:10input file type의 ref attribute에 fileInputRef를 넣음으로써 DOM node를 ref합니다.

03:25Add Image를 클릭하니 파일 선택기가 열립니다. fileInputRef.current.click이 제대로 동작하네요.

03:41파일 선택기에서 선택된 파일을 state로 관리할거에요. 이때 type은 File이 됩니다.

04:08파일이 선택되었다는 것은 input file type의 상태가 변하는 것을 의미하죠? 그래서 input file type의 onChange 이벤트 핸들러를 통해 변경된 값을 다루어요.

04:50event.target.files가 되는 이유는 파일을 고를 때 여러 개 선택가능하기 때문이에요.(해당 학습노트에서는 하나의 파일만 다루기 때문에 files의 첫 번째 요소만 가져옵니다)

05:04input file type에서 onChange 이벤트 핸들러가 유효한 file data를 넘겨줄 시, setImage를 통해 image(File type) state를 갱신해요. 만약 아무런 파일을 고르지 않았다면 null로 setImage를 초기화합니다.

05:32input이 image 파일만 다룰 수 있게하기 위해서 accept 속성의 값을 'image/*'로 변경해요

06:10뿐만 아니라 file을 다루는 input file type의 onChange 이벤트 핸들러에서도 넘겨받은 event 객체를 통해 추출한 file의 적합성을 체크합니다.

06:48파일 선택기에서 파일을 선택하고 이 파일을 handling 하는 것까지는 구현했지만 이미지 미리보기 기능을 구현하고 있는 것은 아닌데요, 이를 구현하기 위해 필요한 로직을 추가로 구현합니다.

09:40우선 트리거는 image의 변경입니다. 무언가 변경되었을 때 side effect 함수를 호출하는 방법은? 네, 바로 useEffect를 활용하는 것이죠. 두 번째 인자에 image를 넣습니다. 그리고 내부에 if else문으로 image를 검사하고 image가 존재하면 FileReader API를 활용해 image를 읽고나서 이 데이터를 preview에 대한 상태인 preview에 넣어줍니다. 만약 image가 변경됐는데 image가 존재하지 않는다면(null이라면) preview도 null로 만들어줍니다. *FileReader: FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻습니다./출처(https://developer.mozilla.org/ko/docs/Web/API/FileReader) *FileReader readAsDataURL: Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data./출처(https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL) *FileReader result: 파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다./출처(https://developer.mozilla.org/ko/docs/Web/API/FileReader/result) *FileReader loadend: loadend (en-US) 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.)/출처(https://developer.mozilla.org/en-US/docs/Web/API/FileReader/loadend_event)

09:54preview가 어떤 값을 나타내는지 p태그로 찍어서 확인해봅니다.

10:23이제 이 preview 값을 img 태그의 src에 넣어서 확인해봅니다.

10:40img가 화면에 표현된다는 것은 preview가 있다는 것이고 preview가 있다는 것은 image(File type)가 존재한다는 것이므로 conditional rendering합니다(image와 button을)

11:26img 태그의 스타일 변경하여 보기 좋게 바꿔줍니다.

12:26이미지(img tag)를 눌렀을 때 image파일의 값이 초기화 되도록 img의 onClick 이벤트 핸들러로 setImage(null)을 해줍니다. 자동으로 preview도 null이 되겠죠?

13:06이렇게 미리보기가 지원되는 이미지 파일 셀렉터를 구현하였습니다!

13:12끝(여기까지만 시청해주세요)

✔ 학습 완료

취소

작성하기

이 학습노트가 포함된 러닝패스예요.

리액트 useState, useEffect로 구현하는 프로젝트 모음

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

서원석

의 학습노트