[React] 컴포넌트 생명주기와 useEffect, clean up function

[ 컴포넌트의 생명주기 (Lifecycle) ]

1. 컴포넌트가 페이지에 장착(생성)될 때 => mount

2. 컴포넌트가 업데이트(재랜더링)될 때 => update

3. 컴포넌트가 삭제될 때 => unmount

 

이를 활용하면 컴포넌트가 mount, update, unmount 될 때 특정 코드를 실행할 수 있도록 개발이 가능하다.

Lifecycle hook을 이용하면 되는데 쉽게 말하면 컴포넌트의 생명주기에 갈고리를 달아 간섭한다고 생각하면 된다. 쓰는 방법은 아래와 같이 useEffect를 사용한다. 

 

[ useEffect란? ]

useEffect안의 코드는 컴포넌트가 mount, update 될 때마다 실행된다. 아래 버튼을 누를 때마다 화면이 재랜더링되므로 버튼을 누를 때마다 'hello'가 출력된다. 

import { useEffect, useState } from "react";

function App() {
  let [cnt, setCnt] = useState(0)

  useEffect(() => {
    console.log('hello')
  })

  return (
      <button onClick={ () => { setCnt(cnt + 1)}}>버튼</button>
    );
}

사실은 useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update시 실행되는데 이유는 컴포넌트가 mount & update시 function 안에 있는 코드도 다시 읽고 지나가서 그렇다. 그럼 useEffect는 왜 필요한거지? 

 

useEffect 안에 적은 코드는 랜더링 이후에 동작한다. 아래 코드에서 봤을 때 아래의 html을 먼저 보여주고 나서 useEffect안의 오래 걸리는 코드가 실행된다. 

function App() {

  useEffect(() => {
    // 오래 걸리는 코드 
  })

  return (
      <div><div/>
    );
}

따라서 useEffect는 반복문을 여러번 돌린다던가, 타이머다는 거, 서버에서 데이터 가져오는 작업 등을 안에 넣으면 유용하다. 컴포넌트의 핵심 기능은 html 랜더링이기 때문에 그 외의 필요 없는 기능을 useEffect안에 넣는다고 생각하면 된다. 

 

[ useEffect 실행 조건 ]

아래 코드에서 보다시피 useEffect의 둘째 파라미터로 [ ]을 넣을 수 있는데 [ ]안에 있는 cnt가 바뀔 때에만 useEffect안의 코드 'hello'를 실행시켜준다. ([ ]안에는 state를 여러개 넣을 수 있다)

만약 [ ] 안에 아무것도 넣지 않으면 컴포넌트 mount시 1회만 실행되게 한다. 

  useEffect(() => {
    console.log('hello')
  }, [cnt])

 

 

흔히 setTimeout 타이머를 쓸 때 브라우저 안에 타이머가 하나 생기는데 useEffect안에 쓰게 되면 컴포넌트가 mount 될 때마다 실행되므로 코드를 잘못짜면 타이머가 여러개 생기는 버그가 일어난다. 이런 버그를 방지하기 위해 기존 타이머를 싹 제거하라는 코드를 아래와 같이 return () => {}안에 짜주면 된다. 

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

위와 같은 함수를 clean up function 이라고 하는데 여기에는 주로 타이머제거나 ajax 요청 중단, socket 연결 요청 제거와 관련된 코드를 많이 작성한다. 

(컴포넌트 unmount 시에도 clean up function안에 있던 코드가 1회 실행된다.)

 

[ useEffect 사용법 정리 ]

 

1. 재랜더링마다 코드를 실행되게 하려면 

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

2. 컴포넌트 mount시 1회만 실행되게 하려면

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

3. useEffect 안의 코드 실행 전에 항상 실행되게 하려면 (clean up function)

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

4. 컴포넌트 unmount 시 1회 실행되게 하려면

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

5. a가 변경될때만 실행되게 하려면

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