컴포넌트의 인생 Lifecycle

✅ 컴포넌트의 인생

컴포넌트는 Lifecycle이라는 개념이 있다
컴포넌트도 인생이 있다는거다

컴포넌트는
1.생성이 될 수도 있고(mount)
2.재랜더링이 될 수도 있고(update)
3.삭제가 될 수도 있다(numount)

우리가 이걸 배우는 이유는 컴포넌의 인생 중간 중간에 간섭을 하기 위해서다
간섭은 뭐냐 코드실행인데 컴포넌트가 실행될때 특정코드를 실행할 수도 있고 컴포넌트가 업데이트 될때 특정 코드를 실행 할 수도 있다.

개념 정리

Lifecycle = 컴포넌트의 일생

✅ 컴포넌트의 인생에 간섭하는법

이런식으로 갈고리를 달아서 코드를 넣어주면된다
그럼 페이지 장착시, 업데이트시,제거시 코드 실행이가능하다
근데 갈고리는 hook이라고 한다 그래서 저걸 Lifecycle hook 이라고 한다

개념 정리

Lifecycle hook = 컴포넌트의 간섭 갈고리

✅ Lifecycle 쓰는법

import {useState, useEffect} from 'react';

function Detail(){

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

콜백함수 추가해서 그안에 코드 적으면 이제 코드는 컴포넌트가 mount & update시 실해된다 그래서 이게 Lifecycle hook이다

Q.왜 두번식 출력 될까?
index.js에 <React.StrictMode>라는 태그가 있으면 디버깅용으로 편하라고 2번 출력해준다

✅ useEffect 밖에 적어도 똑같은데요?

useEffect안에 적은 코드는 html 렌더링 이후에 도착한다
그럼 이제 뭔가 유용해 보인다
예를 들어서 굉장히 시간이 오래걸리는 쓸데 없는 코드가 필요하다고 가정하면

function Detail(){

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

대충 여기에 적으면 반복문 돌리고 나서 하단의 html 보여준다

function Detail(){

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

useEffect 안에 적으면 html 보여주고 나서 반복문을 돌린다
이런식으로 시점을 조작가능하다
그래서 이름이 useEffect이다
함수의 핵심기능 외에 쓸데 없는 기능들을 프로그래밍 용어로 side effect라고 부른다 useEffect도 거기서 따왔다

개념 정리

오래걸리는 반복문, 서버에서 데이터 가져오는 작업, 타이머다는거 이런거 useEffect안에 많이 적는다.

✅ useEffect에 넣을수 있는 실행 조건

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

useEffect()의 두번째 파라미터로 []를 넣을 수 있는데 거기에 변수나 state 등을 넣을 수 있다 그렇게 하면 []에 있는 변수나 state가 변할때만 useEffect 안의 코드가 실행된다
(참고) []안에 state 여러개 넣을수 있음

아무것도 안넣으면 컴포넌트 mount시 1회 실행하고 실행해주지 않는다

개념 정리

변수나 state가 변할때만 실행시키고 싶으면 []안에 넣고
한번만 실행하고 싶으면 아무것도 넣지 않는다

✅ clean up function

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

return ()=>{} 안에 넣을수 있다

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

useEffect보다 return 안에 코드가 먼저 실행된다 이걸 clean up function이라고 부른다

개념 정리

useEffect 보다 먼저 실행시키고 싶은 코드가 있으면 return 안에 작성

본 글은 코딩애플 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다.