이미지 크게 보는 모달 좌우로

1. 로직

2. 코드리뷰

(1) 화살표의 Onpress 기능 내부 구현 

filteredImage 선언 이후에 적어줘야 한다. 

왜냐하면 컴파일은 위에서부터 순서대로 읽기 때문에, 선언부 보다 호출을 먼저 해서 사용하면 에러가 일어난다. 

그리고 해당 내용을 보면 

previousImageIdx나 nextImageIdx가 각각 0보다 작거나 배열 끝 값보다 커지는 경우, -1이 되는 경우 해당 기능에서 더 이상 아무것도 하지 않고 그냥 반환 하라는 예외처리를 적어주었다. 

분명 밑에서도 할 것이지만, 배열의 양 끝으로 갔을 때, 화살표를 지워버리는 로직을 넣어줬는데도, 백엔드적 부분에서 한번 더 예외처리를 해주었다. 이는 2중 보안과 같이 생길 수 있는 예외를 원천 차단하기 위함이다. 

nextImageIdx에서 index가 -1인 경우와 배열의 맨 끝 idx보다 큰 경우 모두 예외처리 해주었다. 그 이유는 배열에 원소가 아닌 값의 index를 찾으려 할 때 findIndex 함수가 반환하는 값이 -1이라서 이다. 그래서 2가지 경우 모두 예외처리 해주었다. 

 

분명 위의 화살표 작동 로직은 이미지 리스트의 양 끝에서 작동하지 않는다. 왜냐하면, 밑의 로직에서 하겠지만, 리스트의 양 끝에서 화살표를 지워버리기 때문에 애초에 작동할 길이 없기 때문이다. 하지만 위처럼 항상 이중으로 예외처리를 하여 혹시라도 생길 수 있는 예외상황을 미연에 방지하는 것이 좋다.

 

(2) 맨 처음 이미지 선택 시 왼쪽 화살표 지우기, 또 맨 끝 이미지 선택 시 오른쪽 화살표 지우기 로직 

disalbed 에서 showPreviousArrow를 토글 시켰다. 그 이유는 다음과 같다. 

showPreviousArrow는 이미지의 index가 0이면 false ( '화살표를 보여주지 않는다.'의 의미)

아닌 경우이면 true ('화살표를 보여준다'의 의미) 이다. 

disalbed는 true일 때 Touch가 불가능 하고, false일때 touch를 가능하게 한다. 

index가 0일 때 터치가 불가능하고, 아닐 때 터치가 가능해야 함으로, 

showPreviousArrow === true 일때 , disabled === false, showPreviousArrow === false 일때 disabled === true 가 되어야 함으로 toggle 되어야 한다. 

 

 

** disalbe 속성 사용 대신에 조건문 사용하면 안되나요? 

{showNextArrow && (
<ArrowButton iconName={"arrow-right"} onPress={onPressRightArrow} />
처음에는 이걸 썼는데, 이러면 해당 화살표가 있던 공간까지
다 비워지기 때문에, 화면 내용이 화살표 있던 공간으로 쏠린다.

이를 방지하기 위해서 위의 로직보다는 
TouchableOpacity의 disabled랑 color = transparent를 
이용하여 공간은 차지 하되 안 보이도록 만들어준다.

 

** 사용자가 맨 처음 이미지를 누를 경우, 원래 화살표가 있던 영역은 안 보일 뿐이지 공간은 차지하고 있습니다. 근데 화살표가 있던 공간을 눌러도 부모 pressable의 onPress 기능인 BackDrop(모달이 꺼지는 로직)이 실행되는 데 이유는 무엇인가요? 

 

원래는 화살표 로직이 전체 Pressable의 자식 태그여서 화살표 로직의 onPress 기능이 부모 Pressable의 것보다 우선순위를 가졌다.  근데 화살표 로직의 touchableOpacity가 disalbed 되면서 onPress 기능을 상실했다!

따라서 화살표 로직영역을 누르면 차순위 였던 부모 Pressable의 onPress기능이 작동된다. 

 

 

3. 새롭게 알게 된 내용 정리 

배열의 함수인 findIndex란? 

배열.findIndex()의 ()안을 만족하는 첫번째 원소의 index를 반환한다. 

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// Expected output: 3

해당 경우 130이 처음으로 isLargeNumber 로직을 만족하는 원소이므로 해당 원소의 index인 3이 출력된다.