Lifecycle과 useEffect 2

useEffect에 넣을 수 있는 실행조건

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

useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데

거기에 변수나 state같은 것들을 넣을 수 있음

그러면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행해줌

그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행됨요

(참고) [ ] 안에 state 여러개 넣을 수 있음

만약 아무것도 안넣으면 컴포넌트 mount(로드)시 1회 실행하고 영영 실행해주지 않음

// []안에 아무것도 안넣으면 로드시 1회만 실행해줌
useEffect(()=>{ 실행할코드 }, [])

---

clean up function

useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 넣으면 됨

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

그럼 useEffect 안에 있는 코드를 실행하기 전에 return ()=>{ } 안에 있는 코드를 실행해줌

이걸 clean up function이라함

이딴 기능이 도대체 왜 있냐면 useEffect 안에 있는 코드를 실행할 때 싹 치우고 깔끔하게 실행하는게 좋을 때가 있음

예를 들면 setTimeout 타이머를 쓴다고 쳤을때 쓸때마다 브라우저 안에 타이머가 하나 생김

근데 useEffect 안에 썼기 때문에 컴포넌트가 로드 될때마다 실행되는데 그럼 잘못 코드를 짜면 타이머가 중복으로 생길지도 모름

나중에 이런 버그를 방지하고 싶을때 useEffect에서 타이머 만들기 전에 기존 타이머를 싹 다 제거하라고 코드 짤 때
return =>{] 여기 안에 짜면 되는거임

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

타이머 제고하고 싶으면 clearTimeout(타이머) 이렇게 코드 짜면됨 이러면 좀 더 안전한 코드가 될지도?

(참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성

(참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행됩니다.

---

빡통식 정리

1. 이러면 재렌더링마다 코드 실행 가능

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

2. 이러면 컴포넌트 로드시 1회만 실행 가능

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

3. 이러면 useEffect 안의 코드 실행 전에 항상 실행

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

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

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

5. 이러면 state1 이 변경될때만 실행

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