React - Lifecycle, useEffect

Lifecycle : 컴포넌트의 인생

1. mount (생성)
2. update (재렌더링)
3. unmount (삭제)
   이 컴포넌트의 인생 중간에 간섭하기 위해 필요한 장치 : Lifecycle hook
   -> useEffect를 사용

useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });

즉 mount, update시 useEffect 내부의 코드가 실행된다

useEffect를 사용하는 이유?

useEffect() 내부의 코드들은 html 렌더링 이후에 동작된다.
따라서 어려운 연산, 서버에서 데이터를 가져오는 작업, 타이머 장착 과 같은 코드들을 적는데 유용

그런데 위 코드와 같이 적으면 html이 재렌더링 될때마다 코드가 실행되는데 mount시 1회만 실행하고 싶거나, 어떤 변수가 바뀔때만 코드를 실행시키고 싶을 수 있다.

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

이렇게 작성하면 mount시 1회만 실행하고 이후로 실행하지 않는다.

useEffect(()=>{ 실행할코드 }, [변수 or state])

이렇게 작성하면 변수나 state가 변경될때마다 실행된다.

useEffect를 실행하기 전에 실행시키고 싶은 코드가 있다면?
useEffect 내부에 타이머를 설정했는데 재렌더링이 계속 되어 타이머가 점점 늘어난다면 과부화가 생길 수 있다. 이를 막기 위해 이전의 타이머는 제거해주는 것이 좋다. 어떻게 하는가?

useEffect(()=>{
       let a = setTimeout(()=>{ setAlert(false) }, 2000)
       console.log(2)

       return () => {
        console.log(1)
        clearTimeout(a)
       }
    }, [])

이 코드를 실행하면 콘솔창에 1, 2 순서대로 찍히는데 이를 통해 return 부분이 먼저 실행되고 이후 위 코드가 실행됨을 알 수 있다.
return ()=>{} 부분을 clean up function 이라고 한다

출처 : https://codingapple.com/