Lifecycle과 useEffet 2

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

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

-> count라는 변수가 변할때만 useEffect 안의 코드가 실행된다.

• useEffect() 의 둘째 파라미터로 [] 를 넣을 수 있다.
• 여기에 변수나 state같은 것들을 넣을 수 있다.
• [] 안에 있는 변수나 state가 변할때만 useEffect 안의 코드를 실행해준다.

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

• 아무것도 넣지 않음녀 컴포넌트 mount 시 (로드 시) 1회 실행하고 영영 실행해주지 않는다.

🖤 clean up function

• useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 넣을 수 있다.
• 이것을 clean up function 이라고 부른다.

useEffect(()=>{ 
  두번째 실행 
  return ()=>{
    첫번째 실행
  }
}, [count])

• 항상 기능을 알면 어디서 사용하는지 언제 사용하는지를 알아야 한다!!
  

• 복잡하고 어려운 숙제할 때 책상을 싹 치우고 하면 잘되는 것처럼 useEffect 안에 있는 코드를 실행할 때도 싹 치우고 깔끔한 마음으로 실행하는게 좋을 때가 있다.

• ex) setTimeout() 쓸때마다 타이머가 하나 생기는데 useEffect 안에 썼기 때문에 컴포넌트가 mount 될 때마다 실행된다.

• 그렇게 되면 타이머가 100개 1000개 생길 수 있다.

• 이런 버그를 방지하기 위해 useEffect 에서 타이머를 만들기 전 기존 타이머를 싹 지우는 코드를 짜야한다. (clean up function)

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

• 타이머를 제거하고싶으면 clearTimeout(타이머) 이렇게 코드를 짜면 된다.

🖤 한번에 정리하기

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

• 재렌더링마다 코드 실행이 가능하다.

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

• 컴포넌트 mount 시 (로드 시) 1회만 가능하다.

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

• useEffect 안의 코드 실행 전에 항상 실행된다.

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

• 컴포넌트 unmount 시 1회 실행된다.

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

• state1이 변경될 때만 실행된다.