[React] useEffect (컴포넌트의 Lifecycle, clean up function)

 

 

1. 컴포넌트의 Lifecycle

---

 

우선 컴포넌트의 Lifecycle이라는 개념을 알아보자.

 

컴포넌트는

1. 생성이 될 수도 있고(mount)

2. 재렌더링 될 수도 있고(update)

3. 삭제가 될 수도 있다(unmount)

 

컴포넌트의 Lifecycle을 알면 컴포넌트 인생 중간중간에 간섭할 수 있다.

여기서 간섭이란 코드실행을 말한다. 따라서 컴포넌트가 장착 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트 될 때 특정 코드를 실행할 수도 있다.

 

 

 

 

2. 간섭하는 방법

---

"Detail 컴포넌트 등장 전에 이것좀 해줘"

"Detail 컴포넌트 사라지기 전에 이것좀 해줘"

"Detail 컴포넌트 업데이트 되고나서 이것좀 해줘"

 

이렇게 코드를 실행해달라고 간섭할 수 있는데 간섭은 갈고리(hook)를 달아서 한다. 

 

 

위와 같이 갈고리를 달아서 코드를 넣어주면 된다. 

 

 

 

 

3. Lifecycle hook 쓰는 방법

---

import {useState, useEffect} from 'react';

function Detail(){

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

1. 우선 상단에서 useEffect를 import 한다.

2. 콜백 함수를 추가해서 안에 코드를 적는다.

3. 적은 코드는 컴포넌트가 mount & update 시 실행된다.

 

 

 

 

4. useEffect 밖에 적어도 똑같은데?

---

사실 useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update시 실행된다.

이유는 컴포넌트가 mount & update 시 function 안에 있는 코드도 다시 읽고 지나가서 그렇다.

 

그럼 useEffect를 사용하는 이유는 뭘까?

이유는 useEffect 안에 적은 코드는 html 렌더링 이후에 동작하기 때문이다.

 

굉장히 시간이 오래걸리는 쓸데없는 코드가 필요하다고 가정해보자.

function Detail(){

  (반복문 10억번 돌리는 코드)
  return (생략)
}

여기에 적으면 반복문을 돌리고 나서 하단의 html을 보여준다.

 

 

function Detail(){

  useEffect(()=>{
    (반복문 10억번 돌리는 코드)
  });
  
  return (생략)
}

그러나 useEffect 안에 적으면 html을 보여주고 나서 반복문을 돌린다.

 

 

이런 식으로 코드의 실행 시점을 조절할 수 있기 때문에 조금이라도 html 렌더링이 빠른 사이트를 원하면 쓸데없는 것들은 useEffect 안에 넣으면 된다.

(ex. 오래걸리는 반복연산, 서버에서 데이터 가져오는 작업, 타이머)

 

 

 

 

5. useEffect에 넣을 수 있는 실행조건

---

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

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

 

따라서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행된다. 또한 [ ] 안에 state는 여러개를 넣을 수 있다.

 

 

 

 

6. clean up function

---

useEffect 동작하기 전에 특정코드를 실행하고 싶다면 return () => {} 안에 넣을 수 있다.

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

 

 

 

왜 이런기능이 있을까?

 

예를 들어 setTimeout()를 쓸 때 마다 브라우저 안에 타이머가 하나 생긴다고 가정해보자.

useEffect 안에 썼기 때문에 컴포넌트가 mount 될 때 마다 실행되며 코드를 잘못 짤 시 타이머가 100개 1000개 생길 수도 있다.

 

이런 버그를 방지하고 싶다면 useEffect 에서 타이머를 만들기 전 기존 타이머를 모두 제거하라고 코드를 짜면 되는데 이때 return ()=>{} 안에 짜면 된다.

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

 

따라서 타이머를 제거하고 싶을 때 clearTimeout(타이머) 를 작성하면 된다.

 

 

 

정리

---

1. 리렌더링마다 코드를 실행한다.

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

 

 

 

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

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

 

 

 

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

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

 

 

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

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

 

 

 

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

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