[React] Component의 Lifecycle과 useEffect (1)

 

React의 Component는 Lifecycle이라는 개념이 있다.

1. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount)
2. 재렌더링이 될 수도 있고 (전문용어로 update)
3. 삭제가 될 수도 있다. (전문용어로 unmount)

그러므로 컴포넌트의 lifecycle에 간섭해 상황에 맞게 코드를 실행 할 수 있고 이걸 lifecycle hook 이라고 부른다.

 

예시

    let [ex, setEx] = useState(0);

    useEffect(() => {
        console.log(1);
    })
    
    <button onClick={() => setEx(ex+1)}>버튼</button>

-> useEffect의 콜뱀함수안에 코드를 적으면 이 코드는 컴포넌트가 mount & update시 실행된다.

---

useEffect 밖에 적어도 똑같은데, 그래도 쓰는 이유는?

 

useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다.

예를 들어 굉장히 시간이 오래걸리는 코드가 필요하다고 가정해 봤을 때,

function Detail(){

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

-> 위 코드는 반복문을 다 돌린 후에 하단의 html을 보여주지만,

 

function Detail(){

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

-> useEffect 안에 적어놓는다면 html을 다 보여주고 나서 반복문을 돌린다.