뒤로 가기
홈으로 이동
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끝(여기까지만 시청해주세요)
✔ 학습 완료

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

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

서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

리액트 18버전의 신기능 3개 (startTransition 등)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
0
👍
1
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기