클릭시 keyframe이 먹히지 않는 이슈

[yeri942]

Day1.jsx

const [img1State, setImg1State] = useState(false);

<D1IMG src="./img/diaryImg/day1G.png" alt="seagull" onClick={() => { setImg1State(true); }} />

const D1IMG = styled.img' &:last-child { animation: ${gMove} 1s infinite ease-in-out alternate; } '

D1IMG 클릭시 img1State 값을 true로 바꾸면 gMove에니메이션이 먹히지 않는다.

onClick이 문제인가? 싶어서 setImg1State(true);코드를 주석처리하고 console.log(2) 코드를 넣었더니 잘작동.. 고로 onClick은 아니다!

[yeri942]

대반전! 문제가 된 코드는 setImg1State(true)가 아닌 {img1State ? <D1Card src="./img/eraser.png" /> : null} 이였다 ㄷㄷ!!