[React] Lifecycle과 useEffect

컴포넌트의 lifecycle

서론

컴포넌트에는 lifecycle이라는 개념이 있다. 즉, 인생이 있다는것이다.

컴포넌트는
1. 페이지에 장착되고(mount)

2. 업데이트되고 (update)
3. 필요없으면 제거된다(unmount)

즉, 전문 용어로
생성이 될 수도 있고 (전문용어로 mount)
재렌더링이 될 수도 있고 (전문용어로 update)
삭제가 될 수도 있다. (전문용어로 unmount)

그런데 이 상황에서 우리가 코드를 실행함으로써 간섭을 줄수가 있다는것이다.

"Detail 컴포넌트 등장 전에 이것좀 해줘"
"Detail 컴포넌트 사라지기 전에 이것좀 해줘"
"Detail 컴포넌트 업데이트 되고나서 이것좀 해줘"

이렇게 코드좀 실행해달라고 간섭할 수 있는데 이때 간섭은 갈고리를 달아서 한다.
그럼 진짜 페이지 장착시, 업데이트시, 제거시 코드실행이 가능하고 이때 갈고리는 영어로 hook이라고 한다. 그래서 이것을 Lifecycle hook 이라 부른다.

React 에서 Lifecycle hook 쓰는 법

import {useState, useEffect} from 'react';

function Detail(){

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

상단에서 useEffect import해오고 콜백함수 추가해서 안에 코드 적으면 이제 그 코드는 컴포넌트가 mount & update시 실행되어진다.

React 에서 Lifecycle hook 쓰는 이유

그런데 사실, useEffect 밖에서 실행하나 안에서 실행하나 모두 똑같은데, 그럼 대체 왜 useEffect를 만들어놓은것인가 ? 하는 질문은 초보들이나 하는것.

useEffect 안에 적은 코드는 html 렌더링 이후에 동작을 한다는 큰 차이가 있다는 중요한 사실!

보통 useEffect 코드는 해당 페이지가 mount되거나 update가 될때 실행이 된다.

useEffect내부에서 주면 html이 렌더링이 된 후에 useEffect 가 동작을 하게되는데
이를통해 웹사이트가 더 빠르고 효율적으로 작동되어지는 것이다.

그렇기 때문에 useEffect를 사용하기 적절한 예시로는
복잡한 연산,서버에서 데이터를 가져와야 하거나 타이머(setTimeout) 를 장착할때 등과 같다.

왜 이름이 useEffect일까 ?

Side Effect 란 함수의 핵심기능과 상관없는 , 곁다리 기능. 부과기능을 의미하는데 바로 이러한 것에서 따온 함수명이다. useEffect 안에 들어갈것은 함수의 핵심기능이 아니라 그 외의것을 집어넣기에 sideEffect같다~ 싶어 useEffect로 지었다 한다.

예시, setTimeout

노란 박스를 만들어놓고 해당 페이지 방문 시 2초후 박스가 사라지도록 구현해보자.

let [alert, setAlert] = useState(true);
   
    useEffect(()=>{
      setTimeout(()=>setAlert(false),2000);
    })
    
    
    return(
   	<>
     <div className="row">
        {
          alert == true ? <div>구매하세요 2초후 사라집니다</div> :null
        }
        <button onClick={()=>{ setCount(count+1)}}>더하기</button>
          <div className="col-md-5">
          <img className='itemimg' src={process.env.PUBLIC_URL + '/p' + id + '.jpg'} /> 
          </div>
          <ItemBox className="col-md-5">
          {/* <h2>{props.shoes[현재url에입력한숫자].id} </h2> */}
          <h3>{search.title} </h3>
          <h4>{search.content}</h4>
          <p>{search.price}</p>
          <BlueBox className="btn btn-danger">주문하기</BlueBox> 
          </ItemBox>
      </div>
    </>