Lifecycle useEffect 2

useEffect에 넣을 수 있는 실행조건

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

useEffect()의 둘째 파라미터로 [ ]를 넣을 수 있는데
거기에 변수나 state같은 것들을 넣을 수 있습니다.

그렇게 하면 []에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행해줍니다.

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

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

아무것도 안 넣으면 컴포넌트 mount시(로드시) 1회 실행.

clean up function

useEffect 동작하기 전에 특정코드를 실행하는 함수
return ( ) => { }

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

ex) 기존 타이머 제거, socket 연결요청제거, ajax 요청 중단

• 기존 타이머 제거

// ex) 기존 타이머 제거 
useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)	// 기존 타이머 제거
  }
}, [])

(참고) 컴포넌트 unmount시에도 clean up function 안에 있는 코드 1회 실행

정리

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

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

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

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

3. useEffect 안의 코드 실행 전 항상 실행

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

4. unmount시 1회 실행

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

5. state1이 변경될 때만 실행

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