리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)

[박지우]

파이썬 독학하기 제목을 클릭할 때마다 상세페이지 Modal 이 나타났다 없어졌다 하는 코드를 짰는데
그 선생님의 답에도 if 문이나 삼항 연산자를 써서 하거나 !modal을 쓰면 된다고 하셨는데

vart count = 0;
<div className='list'>
        <h4 onClick={()=>{
          count++;
          count%2==0 ? setModal(false) : setModal(true);
          console.log(count);
          }}>{ title[2] }</h4>
        <p>2월 19일 발행</p>
</div>

으로 했는데 콘솔창에 1,1,2,1,1,2 가 반복되서 출력됩니다. 그래서 모달창을 사라지게 할 때는 두번 눌러야합니다

count가 애초에 0 1 2 3 4 점점 커지는게 아니라 왜 1,2 에서 진동하고 두 번 눌러야 작동하는 경우가 발생하는 걸까요

[박지우]

[박지우]

  <div className='list'>
        <h4 onClick={()=>{
          count++;
          if(count%2==0){
            setModal(false);
          }else{
            setModal(true);
          }
          console.log(count);
          }}>{ title[2] }</h4>
        <p>2월 19일 발행</p>
</div>

삼항 연산자가 아닌 if 를 사용해도 그렇습니다

[codingapple]

일반변수 만들어두면 재렌더링시 변수도 리셋되고 그럴 수 있어서 state로 만들어씁시다

[글쓴이]

글