초.간.단! 클릭 시 다른 사진 띄우기! 누구나 할 수 있다!
기존의 디자인은 사진을 교체할 필요 없이, CSS 설정만 하면 됐었습니다. 하지만 변경된 디자인에서는 두 개의 사진을 교체하는 작업이 필요하게 됐습니다.
조건은 두 가지입니다.
1. 버튼 클릭하면 두 번째 사진이 렌더링 되고, 클릭을 떼면 다시 첫 번째 사진으로 돌아오기
2. ★버튼을 누르는 동안 두 번째 사진이 유지★
정말 간단해 보일 수도 있으나, 이를 위해 여러 번의 눈물겨운 삽질이 있었습니다.
1. 조건부 렌더링
처음 시도해 본 방법은 useState와 삼항연산자를 통해 조건부 렌더링을 하는 것이었는데요, 클릭할 때마다 T/F값이 변하며, 변하는 T/F값에 따라 다른 사진을 렌더링 하는 방식입니다.
단 true로 변경되어도, setTimeout을 통해 0.2초 뒤에 다시 false로 돌아오게 했습니다. 클릭하면 두 번째 사진이 0.2초만 렌더링 되는 것이죠.
하지만 2가지 조건 중 1번 조건은 만족하지만 2번 조건을 만족할 수 없다는 것이 문제였습니다. 즉 클릭 시 사진이 바뀌긴 하는데, 클릭하는 동안 바뀌지는 않습니다. 따라서 이 방법은 기각
2. <img> 태그와 active 활용
active는 마우스를 누른 시점에서부터 떼는 시점까지 적용되는 속성입니다. active를 발견했을 때의 심정은 당장 치킨이 먹고 싶은 상황에서, 마침 누군가 치킨을 사 왔을 때의 심정과 같습니다.
하지만 치킨을 사와도 먹지를 못하면 무슨 의미인가요. 또 삽질을 했습니다.
‘첫 번째 사진이 클릭되는 동안 display를 none으로 처리하고 두 번째 사진을 띄우면 되겠지? ㅎㅎ’ 아 진짜 개쩐다; 토스 네이버 취업이 보인다!! 판교가 보인다!!!
하지만 '첫 번째 버튼이 active 상태인 것을 어떻게 추적하는가'라는 의문과 'css에서 상태에 따라 다른 css를 적용할 수 있나?'라는 의문을 스스로 해결할 수 없었습니다. '제2의 자아' 지피티가 등장할 차례입니다.
극T 성향의 챗지피T는 언제나 공감보다는 해결책을 제시해 줍니다. 절망적인 내 상황에 공감해 줘. 근데 지피티 말대로 자바스크립트로 구현하면 첫 번째 케이스와 똑같은 상황이 벌어집니다. 즉 도움이 안 됩니다 에잉 쯧
3. <button> 태그에 background-image 적용
그러다 문득 '사진을 꼭 <img> 태그로 나타낼 이유가 있을까'라는 생각이 들었습니다. '아니 '버튼 사진'이면 <button>을 써야지 머선 <img>를 쓰고 있었나!!!'라는 사고과정의 흐름 속에 <button> 태그에 background-image 속성으로 버튼 사진을 넣기로 했습니다.
우선 버튼을 생성해 줍니다.
그리고 버튼 태그 기본 스타일 지우기 3대장을 적용해서 기본 스타일을 지워줍니다.
버튼에 백그라운드 이미지를 적용시켜 주고!
나머지 기타 등등 필요한 css를 다 적용시킵니다. 그리고 핵심! active 상태일 때, 두 번째 사진이 나오도록 백그라운드 이미지의 url를 변경합니다.
이렇게 되면!
그냥 눌러도 바뀌고, 누르고 있어도 바뀌게 됩니다. 조건 1,2번을 모두 만족하는 것이죠.
사실 어찌 보면 굉장히 사소한 디테일이라.. 욱 디자이너님께 말씀드리고 그냥 넘기려고 했습니다. 근데 생각보다 금방 될 거 같았고, 간단해 보여서 그냥 하게 됐습니다.
결론적으로 생각보다 금방 될 작업도 맞았고, 간단한 작업도 맞았으나~ 능력 부족으로 인한 삽질 때문에 오래 걸린 것이다~ 아무튼 해결! 끗~~~