React 쇼핑몰(Lifecycle)

Lifecycle

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

1. 컴포넌트의 생성은 mount

2. 컴포넌트의 재렌더링은 update

3. 컴포넌트의 삭제는 mount 입니다.

컴포넌트의 Lifecycle은 중간에 특정 코드를 실행할 수 있다는 특징이 있습니다.

그리고 특정 코드들을 장착할 때 사용하는 것을 Lifecycle hook 이라고 부릅니다.

 

 

Lifecycle hook

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

예전에는 class 문법으로 컴포넌트를 만들어, Lifecycle에서 위와같이 hook을 달아줬었습니다.

 

하지만 요즘 React에서는 useEffect를 사용합니다.

import {useState, useEffect} from 'react';

function Detail(){

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

먼저 상단에 useEffect를 import하고, 콜백함수를 추가해서 코드를 적으면 컴포넌트가 mount 또는 unpdat 될 때 해당 코드가 실행됩니다.

참고로, 위의 코드를 실행하면 '안녕'이 2번 출력이 될 텐데 index.js에서 <React.StrictMode>태그가 있으면 2번 출력해줍니다.

 

 

useEffect

사실 useEffect 안에 코드를 적지 않고 바깥에 적어도 컴포넌트 mount & update 실행이 됩니다.

그렇다면 useEffect는 왜 쓰는것일까요?

useEffect 안에 적은 코드는 html 랜더링 이후에 동작합니다.

function Detail(){

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

function Detail(){

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

위에 2개의 코드를 보면 useEffect 를 사용해서 코드의 실행 시점을 조절할 수 있습니다.

html 랜더링이 빠른 사이트를 원하면 쓸데 없는 코드를 useEffect 안에 넣는 것이 좋습니다.

 

 

useEffect의 실행조건

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

useEffect 는 두 번째 파라미터로 [ ] 를 넣을 수 있습니다.

[ ] 안에는 변수나 state 들을 넣을 수 있으며, 이것들이 변할 때에만 useEffect 안의 코드를 실행해줍니다.

또한 [ ] 안에는 state를 열 개 넣을 수 도 있으며, 아무것도 넣지 않으면 컴포넌트 mount 시 1회 실행하고 다음부터는 실행하지 않습니다.

 

 

clean up function

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

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

return () => { } 안에 코드를 넣어 먼저 코드를 실행시킬 수 있습니다.

 

예를 들어, setTimeout 타이머를 사용하는 코드를 짜보겠습니다.

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

위와 같이 clearTimeout 를 사용하지 않으면 setTimeout() 쓸 때마다 브라우저 안에 타이머가 하나씩 생깁니다.

그런데 코드를 useEffect 안에 썼기 때문에 컴포넌트가 mount 될 때 마다 실행됩니다.

그래서 코드를 잘못 짜면, 타이머가 계속 생겨날 버그가 생길 수 있습니다.

이런 버그를 방지하고 싶을 때 clean up function 을 사용하는 것입니다.

 

 

정리

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

1. 재랜더링 할 때마다 코드를 실행 가능하다.

 

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

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

 

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

3. useEffect 안의 코드 실행 전에 실행 코드가 먼저 실행된다.

 

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

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

 

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

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