useEffect 사용해 보기

Detail페이지에 들어가면 alert가 뜨고,
2초 후 박스를 사라지게 해보겠음

동적인 ui를 만들땐,
1. ui상태를 저장한 state 생성
2. state에 따라 ui가 어떻게 보일지 작성

동적인 ui 생성

function Detail(){

  let [alert, setAlert] = useState(true);

  return (
  {
    alert == true
    ? <div className="alert alert-warning">
        2초이내 구매시 할인
      </div>
    : null
  }
  )
}

state를 생성해서 기본값을 true로 두었음.

그리고 3항 연산자를 사용해서
alert가 true이면 div박스가 보이고, false이면 null:아무 동작도 하지 않도록 했음.

이제 Detail페이지 접속 후 2초 후 이걸 alert를 false로 바꾸면 될 듯 함.

useEffet와 setTimeout을 쓰면 될 듯

useEffect

function Detail(){

  let [alert, setAlert] = useState(true)
  useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
  }, [])

  return (
  {
    alert == true
    ? <div className="alert alert-warning">
        2초이내 구매시 할인
      </div>
    : null
  }
  )
}

이렇게 해주면 2초 후 alert를 false로 잘 바꿔줌

근데 여기서 useEffect 뒤에 []는 뭘까?

🤔 useEffect에 넣을 수 있는 실행조건

useEffect(()=>{ 실행할 코드}, [count])

useEffect의 둘째 파라미터로 []를 넣을 수 있는데,
여기에 변수나 state같은 것들을 넣을 수 있음.
그러면 []에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행해 줌.
그래서 위의 코드는 count라는 변수가 변할 때만 useEffect안의 코드가 실행이 됨!

📎참고)

[count, alert]이런식으로 []안에 state를 여러 개 넣을 수 있음.

useEffect(()=>{ 실행할 코드 } [])

아무것도 넣지 않으면 컴포넌트 mount시(로드 시) 1회만 실행하고 영영 실행해주지 않음.
그래서 위에 코드도 애를 넣었음.

🤔 clean up function

useEffect 동작 전 특정 코드를 실행하고 싶으면 return ()=>{}안에 넣을 수 있음.

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

이렇게 써주면 useEffet안에 있는 코드르 실행하기 전에
return ()=>{}안에 있는 코드를 실행해 줌
이걸 clean up function이라고 부름

🤔 clean up function은 언제 쓰면 좋을까?

useEffect안에 있는 코드를 실행하기 전에 깨끗하게 싹 치우고 깔금한 마음으로 실행하고 싶을때 쓰면 좋음

예를 들어, seTimeout타이머인데 setTimeout()을 쓸 때마다 브라우저 안에 타이머가 하나 더 생김
근데 useEffect안에 썼기 때무에 컴포넌트가 mount될 때 마다 실행됨.
그럼 코드를 잘 못 짜면 타이머가 100개 1000개 생길 수 있음..

나중에 이런 버그를 방지하고 싶으면 useEffect에서 타이머를 만들기 전에!
기존 타이머를 싹 제거하라고 코드를 짜면 되는데
이런 코드를 짤 때 resturn ()=> {}안에 짜면 됨~

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

타이머를제거하고 싶으면 clearTimeout(타이머)
이렇게 코드를 짜주면
타이머 장착하기 전에 기존 타이머가 있으면 제거를 해줄듯!


📎참고1. clean up function에서는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작서함.
📎참고2. 컴포넌트 unmount시에도 clean up function안에 있던게 1회 실행됨.

#Summary

1. 재랜더링마다 코드 실행

useEffect(()=>{ 실행할 코드 })

2. 컴포넌트 mount시(로드시) 1회만 실행 가능

useEffect(()=>{ 실행할 코드 }, [])

3. useEffect안에 코드 실행 전 항상 시랭

useEffect(()=>{ 
    return ()=>{
      실행할코드
    }
})

4. 컴포넌트 unmount 시 1회 실행

useEffect(()=>{ 
    return ()=>{
      실행할코드
    }
}, [])

5. state1이 변경될 때만 실행

useEffect(()=>{ 
	실행할코드
}, [state1])