Nextjs는 클릭 시 새 div를 렌더링합니다.

Question

이미지가 있고 동일한 이미지의 더 큰 버전으로 새 div(클릭 시)를 만들고 싶습니다.

저는 네 가지 방법을 시도했습니다:

1. 클릭 시 div 렌더링

으아악

2. 맞춤형 구성요소

으아악

3. 기존 div onClick에서 숨겨진 클래스 삭제

으아악

4. 이것은 작동하지만 nextjs 이미지 최적화를 잃었습니다

으아악

모든 방법에서 콘솔의 로그를 볼 수 있지만 방법 4에서만 새 div를 볼 수 있습니다.

방법 4만이 올바른 방법인가요? 가능하다면 이미지 구성 요소를 사용하고 싶습니다. 어떻게 생각하나요?

Answer 1

@Atena Dadkhah 정말 감사합니다. 귀하의 답변은 매우 유효합니다.

프로젝트에는 이미지가 하나도 없고 여러 뭉치만 있으므로 최종 코드는 다음과 같습니다.

으아아아

그러면 다음과 같은 이미지가 나타납니다.

으아아아

그 다음 숨겨진 div:

으아아아

아직 div를 닫는 동작이 부족하지만 추가하기 쉬울 것입니다.

다시한번. 감사합니다 :)

Answer 2

다음과 같이 시도해 볼 수 있습니다.

고리 세트:

으아아아 으아아아

이 코드에서는 기본적으로 사용자가 이미지를 클릭할 때마다 변수 zoomImage를 true로 변경하도록 Next.JS에 지시하므로 기본적으로 숨겨진 더 큰 이미지에 표시 블록이 있게 됩니다. (tailwindcss를 사용하고 있는 것 같습니다)