[shop-project] useEffect()

🌈 useEffect()

• 컴포넌트의 Lifecycle을 관리하는 기능을 한다.
• React Lifecycle hook의 일종

🍎 컴포넌트의 Lifecycle 이란?

컴포넌트는 등장(생성), 업데이트(재렌더링), 퇴장(삭제) 되는 인생이 있다.
이 과정에서 hook을 걸 수 있다. (= useEffect())
hook으로 컴포넌트 인생 중간중간에 무언가 명령을 줄 수 있다.
ex) <Detail> 퇴장 전에 ~좀 해주세요(다른페이지로 이동 전에 해야할 코드 구현)

• function형의 경우, hook을 아래와 같이 사용할 수 있다.

import React, { useEffect } from 'react';

function App() {

  useEffect( () => {
    // 컴포넌트가 등장(Mount) 될 때 실행할 코드 등
    // 컴포넌트가 update 될 때 실행할 코드 등
    return () => { // 컴포넌트가 사라질 때(unmount) 실행할 코드 }
  });

  return ()
}

• class형의 경우, hook을 아래와 같이 사용할 수 있다.

class App extends React.Component {
  componentDidMount() {
    // 컴포넌트가 Mount 될 때 실행할 코드
  }
  componentWillUnmount() {
    // 컴포넌트가 Unmount 될 때 실행할 코드
  }
}

🐣 Detail 페이지 방문 후, alert 창이 2초 후에 사라지게 하는 기능 구현

import React, { useEffect } from 'react';

function Detail() {

  useEffect( () => {
    // alert 창이 2초 후에 사라지게 할 코드 작성하기 (setTimeout() 함수 활용)
  });

  return (
    <div className="alert">
      <p> 재고가 얼마 남지 않았습니다</p>
    </div>
  )
}



// 기능 코드 구현
import React, { useEffect } from 'react';

function Detail() {

  let [alert, setAlert] = useState(true)  // alert창의 상태변화를 위해 state생성

  useEffect( () => {
    let timer = setTimeout( () => { setAlert(false) }, 2000 ) 
    // 2초 후에 alert state의 값을 변경(false)해주세요

    ❗ 위 코드는 컴포넌트가 "등장"할 때 실행되지만, "업데이트"될 때도 역시 실행돼버린다!!!!!!!
      (등장 & 업데이트 될 때 실행되는 자리이기 때문. 퇴장할때 실행하는 코드는 return 뒤에 씀)
      따라서 setTimeout()함수를 제거해주는 기능도 함께 써줘야 한다.
     
    return () => { clearTimeout(timer) }
    // 컴포넌트 퇴장 기능으로 return () => { 컴포넌트 퇴장시 실행할 코드 } 적어준다.
    // 컴포넌트가 퇴장할 때 setTimeout의 기능을 제거하는 함수(clearTimeout)를 적용한다

  }, [alert]); // useEffect()사용할 때 "조건문"의 기능을 해준다.
               // "alert"라는 state가 변경될 때만 useEffect()안의 코드를 실행하라는 조건문
               // 빈 대괄호([ ])로 남겨두면 컴포넌트가 등장할 때 1번만 실행하라는 조건문

  return (
    // 삼항연산자(조건문)를 이용하여 alert state가 true이면 보여주고 false면 안보여주고
    {
       alert === true
       ? (<div className="alert">
           <p> 재고가 얼마 남지 않았습니다</p>
          </div>)
       : null
    }
  )
}

💡 useEffect() 에 조건문 기능 달아주기

useEffect( () => { 컴포넌트가 "등장", "업데이트", "퇴장" 시 실행할 코드}, [])

useEffect() 함수 내 콜백함수를 통해 실행할 코드 구현한다. 그러나 등장할 때만 해당 코드가 실행되는 것이 아니라, 업데이트될 때도 같이 실행되어 나중에 버그가 생길 수 있다.
따라서 콜백함수 뒤에 조건문을 설정해 줄 수 있다.

useEffect( () => { 컴포넌트가 "등장", "업데이트", "퇴장" 시 실행할 코드}, [state])

useEffect()함수 내 두 번째 인자에 대괄호([ ])로 state를 담아준다. 해당 state가 변경될 때만 콜백함수 내 코드를 실행하라는 의미의 조건문이다.
state는 여러개를 담을 수 있다. (담긴 state가 모두 변경될 때 실행하라는 의미)

만약, 대괄호([ ])안에 빈 상태로 두는것은 처음 컴포넌트 등장 시, 한 번만 실행되고 끝나버리는 효과를 줄 수 있다. 📌📌📌 (업데이트 될 때는 실행되지 않는다는 뜻이 된다)

🎉🎉🎉 setTimeout() 쓸 때 주의점!!!
👉 타이머 해제 스킬 써주기(clearTimeout())

function Detail() {

  let [alert, setAlert] = useState(true)  

  useEffect( () => {
    let timer = setTimeout( () => { setAlert(false) }, 2000 ) 
    // 컴포넌트가 "등장" && "업데이트" 될 때 모두 실행 되어버림
    // 아래 조건문 설정을 통해 처음 등장할 때 1번만 실행하도록 설정하기
    
    return () => { clearTimeout(timer) }
    // 컴포넌트가 퇴장할 때 setTimeout의 기능을 제거하는 함수(clearTimeout)를 적용한다

  }, []);      // 컴포넌트가 처음 등장할 때 1번만 실행하라는 조건 설정

1) setTimeout() 적용 (적용 시, 변수에 담는 습관을 들이자!!)
2) 컴포넌트가 업데이트 되도 setTimeout이 반복되지 않도록 조건문([ ])을 설정해주자
3) 컴포넌트가 퇴장할 때(페이지 이동 등) setTimeout 기능이 제거되도록 clearTimeout()을 설정한다.