서론

컴포넌트에는 Lifecycle이라는 개념이 있다.

1. 생성이 될 수 있고(mount)
2. 재렌더링이 될 수도 있고(update)
3. 삭제가 될 수 있다.(unmount)

우리는 컴포넌트 라이프 사이클에서 중간중간에 개입을 해서 내가 원하는 코드를 입력해서 코드를 실행할 수 있다고 보면 된다.
이렇게 중간중간에 갈고리를 달아서 코드를 넣어주는 것을 hook이라고 부르기도 한다.

사용법

옛날 리액트에선 클래스 컴포넌트를 주로 썼는데
이 때 라이프사이클 훅을 사용하는 방법은

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}

이랬었다.
불편하다..

그러나 요즘 리액트에선 쓰는법이 따로 있다.

import {useState, useEffect} from 'react';

function Detail(){

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

useEffect를 import해오고 콜백함수를 추가해서 코드를 적으면 컴포넌트가 mount 혹은 update 될 때 실행이 된다.

재렌더링(update)시에도 콘솔창에 안녕이 출력되는지 보기위해 버튼을 두고 실험해보자

잘 출력이 된다

렌더링 시 안녕이 출력이 됐고(2번 출력된건 index.js에서 React.StrictMode라는 태그 때문이기에 지워줘도 된다.) 버튼을 다섯번 클릭했는데 5번 안녕이 출력이 됐다.

의문점

useEffect 밖에다가 코드를 적어도 컴포넌트가 mount & update가 되어도 코드가 실행이 된다.

사실 useEffect는 html이 전부 다 렌더링이 되고나서 실행이 되는데, 만약 복잡한 연산 코드가 있을 시, useEffect에 코드를 집어넣게 되면 보다 더 빠르게 html이 렌더링이 될 수 있다.
알아두자

useEffect에 넣을 수 있는 실행조건

useEffect는 변수나 state가 변할 때만 useEffect 안의 코드를 실행해줄 수 있다.

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

이렇게 해두면 count라는 변수 혹은 state가 변할 때만 useEffect 코드가 실행이 된다
but 그러나 html 렌더링(mount)가 됐을 때도 최초 한번은 실행 되는건 잊지말자

한가지 더해서

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

이렇게 아무것도 안 넣게 될 경우에는 컴포넌트 mount시 1회만 실행하고 그 뒤로는 실행해주지 않는다.

clean up function

useEffect가 동작하기 전에 특정 코드를 실행하고 싶으면

return () =>{}를 넣을 수 있다.

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

이렇다

let [count, setCount] = useState(0)

    useEffect(()=>{
        //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
        console.log('안녕')
        return() =>{
            console.log("return");
        }
      },[count]);
      
<button onClick={()=>{ setCount(count+1) }}>버튼</button>

나 같은 경우 처음에 렌더링이 됐을 때 '안녕'을 출력해주었고

버튼을 클릭했을 때, return을 먼저 출력해주는 코드가 실행이 되었다.

이렇듯 return이 있으면 앞에 useEffect 코드를 싹 지우고 깨끗한 상태에서 return을 먼저 실행하고 다음 코드를 실행해주게 된다.

참고로...

1. clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성한다.
2. 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행된다.

간단한 정리

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

html이 재렌더링마다 코드를 실행한다.

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

컴포넌트가 mount시 1회만 실행한다.

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

useEffect 안의 코드가 실행되기 전에 실행된다.

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

컴포넌트가 unmount(삭제)시 1회 실행된다.

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

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