큰 이미지 보이게 하는 Modal(팝업창) 만들기

1. 로직

앨범 이름을 앨범 리스트에서 삭제 로직

이미지 짧게 누르면 해당 이미지 크게 띄우는 로직

2. 코드리뷰 

(1) 앨범 리스트에서 앨범 이름을 길게 누르면 삭제되는 로직에 대한 코드 리뷰 

use-gallery 이후에는 해당 내용의 기능과 명세를 나누고 옮기는 것 뿐이라 따로 설명할 부분은 없다. 

(2) 이미지를 짧게 누르면 해당 이미지의 큰 버젼이 나오는 로직에 대한 코드 리뷰

a. flatlist의 원소인 이미지 하나를 누르면 modal이 열리는 로직

위에 보면 item을 image로 재명칭 했다. 원래는 item을 바로 id와 uri로 구조분해 해서 받았다. 

하지만 OnpressImage라는 함수가 이미지 객체 자체 (id와 uri가 묶여 있는 것)를 받아야 함으로 Image 자체도 필요해졌다. 

따라서 item을 Image로 재명칭 하고 ,id와 uri는 다시 image로부터 구조분해 할당 받았다. 

onPressImage는 이미지 객체 인수를 받으면 해당 객체로 현재 선택된 이미지를 바꾸고, 모달을 연다.

 

b. 선택된 이미지를 전달 받아 모달 구현 

a의 과정으로 이제 이미지 짧게 누르면 Modal은 켜진 상황이다. 

modal은 visible이라는 속성이 true일 때 켜지고, false이면 꺼진다.

onBackDrop을 이미지의 조부모 pressable 태그에 걸었다. 그러면 화면 어디를 눌러도 Modal이 꺼진다. 

Image 태그를 pressable로 한번 더 감은 이유는 후순위에 나온 Pressable일수록 Pressable들 사이에서 onPress 작동 우선순위가 높기 때문이다. 따라서 이미지 태그를 눌러도 조부모 Pressable의 onPress인 BackDrop이 작용되지 않아 화면이 꺼지지 않는다. 

 

또한 이미지는 선택된 이미지의 uri를 받는데, 선택된 이미지 자체가 초기엔 null 값이다. 그래서 선택된 이미지가 null 값이 아닌지 ? 를 통해 null Check를 해줘야 한다. ?은 선택적 체이닝이란 문법으로 해당 값이 null 이면 undefined를 반환하고, 더 이상의 점 표기법 접근은 하지않고, 만약 값이 있다면 그대로 점 표기법을 진행한다. 

 

3. 새롭게 배운 것 

Image 태그의 속성 중 하나인 resizeMode 

 

reSizeMode란? 

원래 이미지의 크기가 view의 frame과 맞지 않을 때, 이미지를 resizing 하는 속성

 

cover: 이미지의 너비 높이를 
view의 크기에 맞춤.
너비나 높이 중 어느 한 부분이 view보다 작다면
크기를 키워서라도 맞춘다. 
원래 이미지의 크기가 오버되면 짤라버림

contain: 
이미지의 크기를 줄여서 
이미지가 view 안에 다 들어오도록 만듦.

stretch: 
contain과 똑같이 이미지가 view안에 
다 들어오도록 만들지만, 차이점은
stretch는 이미지가 view를 가득 채우도록
이미지의 너비나 높이만 독립적으로 늘림. 
따라서 이미지가 양 옆으로 치즈스틱처럼
늘어뜨려지거나 짜부됨.

center: 
이미지의 정중앙을 확대해서 view를 꽉채움.