[React] useEffect (3)

 

다음은 useEffect에 있는 clean up 기능을 알아보자

useEffect(()=>{ 
  console.log('through the wind')
  return ()=>{
    console.log('walk on')
  }
})

 

 

useEffect 함수 내에 return 함수를 생성한 후 코드를 작성하면

 

외부요인에 의해 컴포넌트가 생성되거나 재렌더링 될 때

'through the wind'라는 문구가 출력이 되기전에

'walk on'이라는 문구가 출력 된다.

 

walk on

through the wind 가 차례로 console에 출력이 되는것이다.

 

이 clean up기능은

useEffect 바로 밑의 함수가 실행되기전에

기존에 있던 실행코드를 정리하는 용도로 쓰인다.

 

예를들어

 

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

 

 

다음과 같은 코드는

컴포넌트가 재렌더링되거나 mount 될 때

2초 후 Alert를 false로 바꾸는 함수인데

 

2초가 지나기전에 클라이언트 조작에의해

재렌더링이 또 된다면

타이머가 꼬이게 되고

 

좋은 유저경험이 되지 않을 것이다.

 

이런 사태를 방지하기 위해

return함수안에

clearTimeout함수로 기존의 타이머를 지워주는 것

 

이게 clean up 기능의 핵심.