[React] Lifecycle, useEffect

컴포넌트의 Lifecycle

페이지에 장착됨 (mount)
-> 업데이트(update)
-> 필요없을 시 제거(unmount)

* update : 재랜더링

 

컴포넌트의 Lifecycle 배우는 이유?

- 컴포넌트 인생 중간중간에 간섭가능(=코드 실행 가능)

 

 

컴포넌트에 hook 다는 방법

function Detial(props){
  useEffect(() => {
    console.log('여기에 코드 적기');
  })
  
  return(
  ...

(참고) 예전에 달던 방식

class Detail extends React.Component {
  componentDidMount(){

  }
  componentDidUpdate(){

  }
  componentWillUnmount(){
    
  }
}

* 콘솔에 두번씩 찍히는건 <React.StrictMode>를 삭제하면 됨

** function 위에 useEffect없이 그냥 코드를 짤수도 있지만 useEffect 안에 있는 코드는 HTML 랜더링 후에 동작하기 때문에 이 방법이 더 유용(사용자가 체감하기에 페이지 로딩이 더 빨라보임)

 

useEffect 안에서 사용하는 코드들

1. 어려운 연산
2. 서버에서 데이터를 가져올 때
3. 타이머 장착

 

🤔 이름이 useEffect인 이유?

- useEffect 안에 side Effect 코드들을 보관해서

* Side Effect: 함수의 핵심기능과 상관없는 부가기능

 

 

 

📘 2초 후에 닫히는 박스

function Detail(){

  let [alert, setAlert] = useState(true)
  useEffect(() => {
    setTimeout(() => { setAlert(false) }, 2000);
  }, [])

  return (
    <div className="container">
      {
        alert == true
        ? <div className="alert alert-warning">
            2초 이내 구매시 할인
          </div>
        : null
      }
    ...

 

useEffect 조건

ex)

useEffect( () => { setTimeout(() => { setAlert(false) }, 2000) }, [ count ]  )

    * 이부분이 실행조건 넣는 곳

 - state가 변할 때마다 실행됨 (ex. count가 변할 때마다 실행)

 - ** 조건부분을 [] 이렇게 두면 mount될 때 1회만 실행

 

 

useEffect return

- useEffect 동작 전에 실행됨

 

clean up function

- 함수 제거

- 같은 함수가 중복으로 실행되는 것을 정리

 

ex)

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

 

 

 

~ 정리 ~

useEffect( () => {   } )        1. 재랜더링마다 코드 실행
useEffect( () => {   }, [ ] )   2. mount 될 때 1회 코드 실행 / []에 state 넣으면 state 변경시 마다 실행
useEffect( () => {
  return () => {                   3. useEffect 동작 전 미리 코드 실행

  }
}, [ ] )
useEffect( () => {
  let a = setTimeout(() => { 실행할 코드 }, 초)
  return () => {  
    clearTimeout(a)          4. 중복실행을 정리(삭제)하고 코드 실행. unmount 때 코드 실행
  } 
}, [ ] )