useEffect alert 모달창 띄워주는거에 대해

[김민규]

function Detail(props) {

    const [ui,setUi] = useState(true);
    const [input,setInput] = useState('');
    useEffect(()=>{
        const timer =setTimeout(()=>{
            setUi(!ui);
            console.log(store)
          },2000) 
    },[input]);

 return (

        <DetailBlock>
        {
        ui &&
        <AlertBlock >
            <p>품절 임박</p>
        </AlertBlock>
        }

  안녕하세요 우선 질문하기전에 제코드를 간단하게 복붙 했습니다. useEffect를 사용해서 처음 mount 될때 setTimeout() 함수를 한번 실행 그리고 input에 값이 들어올 때 마다 
ui state를 반전 시켜서 setTimeout를 껏다 켯다 하려고 이렇게 했는데요.

여기서 질문이 있습니다. setTimeout를 useEffect에 넣어주는 것과 꺼낸 것은 실제 랜더링 사이에선 차이를 모르겠습니다.

그래서 제가 일부러 의도해서 useEffect() 두번째 인자에 input 값을 넣어서 input이 재렌더링 될때 마다 setTimeout이
실행되게 의미를 부여해줬어여 그런게 아니라면 굳이 setTimeout를 useEffect에 넣는 이유가 있나여? 

Detail 컴포넌트의 렌더링이 끝날때 clearTimeout() 함수를 실행 시켜주려고 useEffect안에 넣어준건가여??

모르는게 많아 자주 질문드리네요. 감사합니다

[codingapple]

useEffect 바깥에 있는 것들은 Detail 컴포넌트가 장착/재렌더링될 때 마다 항상 다시 실행됩니다. 

useEffect 안에 적은 것들은 Detail 컴포넌트가 장착/재렌더링되고나서 실행됩니다. 근데 뒤에 적는 대괄호[]로 Detail이 장착될때만 실행시키거나 원할 때만 실행시키도록 통제가 가능합니다. 그리고 Detail 컴포넌트가 장착해제될 때 특정 코드실행도 가능합니다.

useEffect가 주는 이점이 필요없다면 그냥 아무데나 코드짜셔도됩니다만 setTimeout 타이머는 필요없을 때 해제하는것도 중요해서 useEffect안에 안전하게 쓰십시오. 그리고 컴포넌트가 완전 장착이 되고나서부터 2초를 세려면 첨부터 useEffect 안에 적는게 좋지 않을까요

[글쓴이]

글