css 애니메이션 응용

[강민여]

안녕하세요선생님

 

let [ani, setAni] = useState('')

<div className={'start ' + ani} >   or className={start ${fade}}

 

이렇게 해서 클래스네임 추가해서 애니메이션 적용하는걸 응용하고싶은데요 

gnb메뉴 클릭시 백그라운드가 바뀌게하려면 클래스네임  추가하고 그 외에 메뉴에는

클래스네임을 빼야하잖아요 

제가 제이쿼리로는 이렇게 작성을 했었는데 

 $('.gnb>li').click(function () {
        $(this).children().addClass()
        $(this).siblings().find().removeClass()
    });

 

이걸 리액트로 하려면

let [gnbBtn, setGnbBtn] = useState('')   // 상태 만들기

<li className={'start ' + gnbBtn}
onClick={() => {
navigate("/");
setGnbBtn('btn_color')
}} >

 

이렇게 해서 클릭하면 배경이 바뀌게는 했는데 

이게 다른 li들 클릭하면 클래스를 빼려면 

setGnbBtn('btn_color') 가 다른 li에 클릭이 일어나면 setGnbBtn('')가 되어야하는데 

'다른 li에 클릭이 일어나면' 이걸 어떻게 풀어야하는지를 모르겠습니다 ㅠㅠ

 

 

 

 

[codingapple]

지금 어떤 li를 눌렀는지 state로 저장해두고

0번째 li는 <li className={ 지금누른li == 0 ? ani : '' }>

1번째 li는 <li className={ 지금누른li == 1 ? ani : '' }>

이렇게 하면 될듯요 

귀찮으면 querySelector 이용해서 class 탈부착직접해도 문제는 없습니다 

[글쓴이]

글