React 에서 SetInterval 로 state 변화주기

리액트에서 setinterval로 state값을 변경해서 렌더링시 componentdidmount, componentwill~~에도 

함수와 감지하는 소스를 만들어주어야함

useEffect내부에 setinterval 을 넣고 두 번째 인자로 빈배열을 넣어주고 

return () => { clearInterval} 필요치 않을 때 없애준다. 

 

const [adsImg, setadsImg ] = React.useState(false) //상단에 state 변수 하나 만들어 놓음

React.useEffect(() => {
	 //data관련 함수~
        let id = setInterval((e) => {
            setadsImg(adsImg => !adsImg) 
          },8000);
        return () => {
            fetching = false;
            clearInterval(id);
        }
    }, [])

변수 토글을 이용해 css로 대부분 처리

  {/* 광고 이미지 영역 */}
   <div className="pconly-b ads-wrap" >
      <ul>
          {adsImg ? <li><a href="" target="_blank"><img src="/static/img/ads-1.png"></img></a></li>
              : <li> <a href="" target="_blank"><img src="/static/img/ads-2.png"></img></a></li>
          }

      </ul>
  </div>

비슷하게 다른 방식으로 state 업데이트가 가능하다.