[React] Life cycle 과 useEffect

0. 컴포넌트의 Life Cycle

• 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 따라서 각각의 컴포넌트는 컴포넌트의 생명 주기(life cycle)가 존재한다.
• life cycle은 컴포넌트가 실행(Mount)되거나, 업데이트(Update)또는 제거(Unmount)될 때 특정한 이벤트들을 호출하는 것이다.

사용자가 간섭 = 중간중간 코드실행 컴포넌트가 실행될때 업데이트 될때 제거 될때 코드 실행해라~라고 간섭

1. useEffect

1.1. 클래스

class Detail2 extend React.Component {
	componentDidMount() {
    }
    componentDidUpdate() {
    }
    componentWillUnmount() {
    }
}

1.2. hook 사용

import {useState, useEffect} from 'react';

function Detail(){

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

state 변경 => 재렌더링(update)

import {useState, useEffect} from 'react';

function Detail(){

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

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={()=>{ setCount(count+1) }}>버튼</button>
  )
}

❓useEffect 밖에 console.log를 찍어도 같은 결과

-> 컴포넌트가 실행 & 업데이트시 function 안에 있는 코드도 다시 읽고 지나가기 때문

❓그럼 useEffect를 사용하는 이유?

-> useEffect 안에 코드는 html이 전부 다 렌더링 된 후 동작!
Js는 위에서 아래로 코드를 읽기때문에 오래걸리는 작업이 위에 존재하면 늦게 html이 보여질수있음. 그러면 사용자는 긴 렌더링 시간을 기다려야함.
따라서, useEffect 내부에 복잡한 작업 코드를 넣으면 사용자에게 빠른 초기 렌더링 속도를 가진 사이트를 보여줄 수 있다.

2. useEffect 실행 조건(dependency)

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

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

useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데, 거기에 변수나 state같은 것들을 넣을 수 있음.
-> [ ]에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행.

(참고) [ ] 안에 state 여러개 넣을 수 있음

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

아무것도 안 넣으면 컴포넌트가 mount시 (첫 실행) 1회 실행하고 끝

2.2. clean up function

컴포넌트의 unmount 이전 or update 직전에 어떤 작업을 수행하고 싶으면 cleanup 함수를 반환해줘야 한다.

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

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a) // 기존 타이머는 삭제해주세요
  }
})

(참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성합니다.

(참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행됩니다.