이중 for문으로 사진을 일렬로 나열하는것 까지는 해결했고
-
다음 목표
각각의 사진을 클릭할때 그 사진을 모달창으로 띄우고 다음 버튼을 누르면 그다음 사진이 뜨도록 만들기 -
접근
index값이 필요 하겠군 -
문제
이중 for문에서는 바깥쪽 for문이 돌아가면 안쪽 for문의 index가 초기화 되버림. 이렇게 되면 안쪽 for문에서 얻은 index가 고유한 값이 아니기때문에 어떻게 하나? -
해결
outterIndex, innerIndex 각각을 parameter로 받아서 ref 변수에 저장한다.
다음 버튼 클릭시 innerIndex값이 images 배열(안쪽 배열)의 길이-1보다 작을때 까지 증가 시키고 같아지면 outterIndex의 값을 증가 시키는데 이때 outterIndex의 값이 review(바깥 배열)의 길이 -1보다 작은지 확인하고 같다면 마지막 이미지이므로 경고창을 띄운다.
imageurl도 인덱스와 computed를 활용하여 쉽게 접근할 수 있었음. -
의문점
reactive를 안쓰고 ref를 쓴 이유? reactive에는 객체나 배열 같은 값들을 담고 숫자, 불리, 문자 등 단순한 원시 타입이면 ref를 사용한다고 한다.
const modalVisible = ref(false);
const currentOutterIndex = ref(0);
const currentInnerIndex = ref(0);
const handleModal = (outterIndex, innerIndex) => {
currentOutterIndex.value = outterIndex;
currentInnerIndex.value = innerIndex;
modalVisible.value = true;
};
const showNextImage = () => {
if (currentInnerIndex.value < state.review[currentOutterIndex.value].images.length - 1) {
currentInnerIndex.value += 1;
} else if (currentOutterIndex.value < state.review.length - 1) {
currentOutterIndex.value += 1;
currentInnerIndex.value = 0;
} else {
alert("마지막 이미지입니다.");
}
};
const currentImageUrl = computed(() => {
return state.review[currentOutterIndex.value].images[currentInnerIndex.value].imageurl;
});- 여기서 새로운 문제 발생
이미지 갯수가 6개 이상일때 더보기 버튼을 띄우기 위해 아래와 같은 코드를 짰는데
watchEffect(() => {
state.count = state.review.reduce((acc, cur) => {
return acc + cur.images.length
}, 0)
})
console.log("카운팅", state.count);이렇게 하면 더보기 버튼을 눌러서 모달창을 띄울때 바로 6번째 이미지를 띄울수가 없다. index값을 모르니까
- 해결
watchEffect(() => {
for (const [idx, tmp] of state.review.entries()) { // 평탄화된 review 배열 내에서 각 이미지 객체에 접근
for (const [jdx] of tmp.images.entries()) {
if (++state.count === 6) { // 여섯번째 이미지의 index 값을 찾음
state.sixthOutterIndex = idx;
state.sixthInnerIndex = jdx;
break;
}
}
}
});이렇게하면 바로 image 객체에 접근 가능하므로 imageurl을 바로 받아올수도 있지만 다음 버튼을 눌러서 그다음 이미지를 띄우는것 까지 연계하려면 결국 index값을 받아오는것이 좋다.
- 의문점
-
entries() 메소드? 객체 자체의 열거 가능한 속성 [key, value] 쌍의 배열을 반환한다. 반환된 배열은 키-값 쌍을 가지는 배열의 순서를 보장한다. review 배열에서는 tmp 객체가 있어야지 images 배열에 접근 가능하므로 tmp 객체를 설정했지만 images 배열에서는 index값만 필요하므로 따로 객체를 설정하지 않고 index 값만 설정함.
-
computed, watch, watchEffect의 차이?
computed 함수는 계산된 값을 반환
watch 함수는 지정된 데이터의 변경을 감지하고 콜백 함수를 실행
watchEffect 함수는 데이터를 자동으로 추적하여 해당 데이터가 변경될 때마다 콜백 함수를 자동으로 실행
computed 함수는 의존하는 데이터가 변경될 때마다 함수를 자동으로 호출하여 값을 계산하므로, 계산량이 많은 작업을 수행할 때 유용하다.
watch 함수는 특정 데이터의 변경을 감지하고 이에 대응하는 콜백 함수를 실행하므로, 데이터 변경에 대한 특별한 처리를 수행해야 할 때 유용하다.
watchEffect 함수는 콜백 함수에서 참조하는 모든 데이터를 자동으로 추적하여 해당 데이터가 변경될 때마다 콜백 함수를 자동으로 실행하므로, 코드를 간결하게 유지할 수 있다.
- count와 sixthOutterIndx, sixthInnerIndex 변수는 왜 ref로 설정하지 않았는지? template에서 값을 참조할때 reactive변수로 설정한 state로 접근하면 잘 동작하는데 ref 변수로 설정하고 .value로 접근하면 오류가 발생함.. 왜인지는 모르겠음. 일단 동작하니까 이대로 두고 나중에 다시 찾아봐야겠음
