import Bori from './bori.jpeg';
import './Gallery.css';
import Cat from './Cat.jpeg';
import Human from './Human.jpeg';
const Gallery = () => { //갤러리라는 컴포넌트를 만들었습니다.
const [animalState, animalFunc] = useState(Bori) //Bori는 강아지 사진입니다.
const [hhState, hhFunc] = useState('강아지')
const Clc = (e) => { //클릭하면 이미지 바꿔버리기, 글씨 바꿔버리기 입니다.
animalFunc(e.target.src)
if(e.target.className === 'img-o dog') {
hhFunc('강아지')</strong>
} else if (e.target.className === 'img-o cat'){
hhFunc('고양이')</strong>
} else if(e.target.className === 'img-o human') {
hhFunc('사람')
}
}
return (
<div>
<nav>
<div className="puppy">
<img src={Bori} className="img-o dog" onClick={Clc} /> //우선 보여주는 3가지 이미지에 클래스네임 따로 주기
<img src={Cat} className="img-o cat" onClick={Clc} />
<img src={Human} className="img-o human" onClick={Clc}/>
</div>
<h3>{hhState}</h3> // 해당 부분이 클래스네임 'dog' 클릭하면 '강아지' 띄우겠다 입니다.
<img src={animalState} className="img-t"/> // 해당부분은 클릭되는 Src를 그대로 적용하는 것입니다.
</nav>
</div>
);
}
쌤 안녕하세요
온클릭이랑 useState응용해보고 있는데요! 강아지, 고양이, 사람
3개의 이미지를 작게 보여주고 해당 이미지를 클릭하면 아래에 크게(똑같은 이미지가)보여지는 화면을 만들어봤는데요.
강아지면 강아지라는 텍스트가, 고양이면 고양이라는 텍스트가 뜨게 하고 싶어서 함수 Clc를 작성했습니다!
물론 구현은 되는데.. 저렇게 3개의 이미지에 각각 클래스네임을 dog, cat 따로 줘서
클릭된 이미지의 클래스네임이 dog면 '강아지' 텍스트 띄우겠다 이런 코드가 쌤이 볼때는 어떠신가요?...
많이 허접한가요 ?? 이 코드 작성하는데 3시간 걸렸습니다.ㅜ_ㅜ
질문 확인 감사드립니다!
