useEffect 잘못 쓴걸까요?

[강민여]

선생님이 알려주신대로 li 클릭하면 백그라운드 바꾸는건 해냈는데요 ..

function App() {
  let [gnbBtn, setGnbBtn] = useState('')
  let [clicked, setClicked] = useState(0)

useEffect(() => {
     setClicked(1);
}, [])

return (
<li  onClick={() => {
              navigate("/");
              setClicked(1);
              setGnbBtn('btn_color')
            }}
            className={clicked === 1 ? gnbBtn : ''}     >

<li onClick={() => {
            navigate("/about");
            setClicked(2);
            setGnbBtn('btn_color')
          }}
           className={clicked === 2 ? gnbBtn : ''} >

이렇게 해서 클릭하면 gnbBtn 이라는 클래스를 추가하는건 작동을 하는데요

 

화면 처음 업로드 되었을때 첫번째 li가 클래스가 추가가 되어있어야 해서 

useEffect 쓰면 될거라 생각하고 업로드했을때 setClicked 값이 1이면 될거 같았는데

안됩니다 ㅠㅠ  이 방법이 아닌건가요??

 

[codingapple]

 let [clicked, setClicked] = useState(1)

이렇게 해놔도 똑같을듯요 

[강민여]

해봤는데 페이지 맨 처음에 로드했을때 적용이 안되어요..ㅠ 

[강민여]

{
            clicked === 1 ? <li className='btn_color' onClick={() => {
              navigate("/");
              console.log(clicked)
            }} ></li> : null
          }
          {
            clicked > 1 ? <li className='' onClick={() => {
              navigate("/");
              console.log(clicked)
            }} ></li> : null
          }

 

이렇게 첨부터 클래스 붙이고 올라가면 떼는걸로 해봤는데 

콘솔로 찍어보니까..  

저는 li에 onClick 하면 setClicked(2) 이렇게 고정 숫자를 줬는데 

콘솔로 찍어서 클릭할때마다 click 상태가 다 달라요 ㅠㅠ 

4번째 li에는 setClicked(4) 해놔도 페이지 로딩되고 4번째를 누르면 

click이 1로 뜹니다.... 바뀐다고 좋아하고 있었는데... 

어떤 li를 누른거까지 기억하는 상태를 만들어야하는건가요..?ㅠㅠ 

[강민여]

setClicked(clicked + 1)으로 고쳐서 원하는 대로 나오게 했어용.......

 

[codingapple]

gnbBtn 초기값이 비어있어서 그런듯요 그것도 초기값 집어넣으면 됩니다 

근데 gnbBtn 쓰는 자리에 그냥 'btn_color' 라고 문자 집어넣어도 똑같지않을까요 

[글쓴이]

글