useEffect 란?

Lifecycle은?

직역하면 인생순환? 이라는 뜻인데
컴포넌트의 인생에 대한 것이다.

간단하게 컴포넌트의 인생에 대해 알아보자면
1. 생성이 된다(mount)
2. 재렌더링이 된다(update)
3. 삭제가 된다 (unmount)

• useEffect 하는데 왜 Lifecycle을 알려주나요

  컴포넌트의 인생을 알아야 중간중간에 간섭할 수 있기 때문이다.

ex)
"이 컴포넌트 생성전에 뭐 해줘"
"이 컴포넌트 업데이트 되자마자 뭐 해줘"
이런식으로 말이다.

Lifecycle hook 쓰는법

맨 위에서 useEffect import 해오고
콜백함수 추가해서 안에 코드를 적으면 된다.

import {useEffect} from 'react';

function Detail(){
  //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행
  console.log("안녕")
});

return (생략)
}

재렌더링시에도 출력이 되는지 테스트 하기 위해
누를시 재렌더링이 되는 버튼을 하나 만들어 보았다.

import {useState, useEffect} from 'react';

function Detail(){
  unseEffect(()=>{
    console.log('안녕');
  });
  
  let [count , setCount] = useState(0)
  
  return (
    <button onClick={()=>{
        setCout(count+1)}}>버튼</button>
    )
}

실행해보면 정말 버튼 누를때마다 안녕이 출력되는 것을 알 수 있었다.

useEffect에 넣을 수 있는 실행조건

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

위 코드처럼 두번째 파라미터로 []를 넣을 수 있는데,
그곳에 변수나 state를 넣을 수 있다.
그렇게 하면 [] 안에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행시켜 준다.

clean up function

useEffect 동작하기 전에 특정 코드를 실행하고 싶을 때 쓴다.

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

useEffect 밖에 적어도 똑같아요?

네~ 똑같습니다☆

하지만 useEffect를 왜, 언제 써야하는지를 확실하게 안다면 useEffect를 쓰는 이유를 알 수 있을 것이다.

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

고로 useEffect안의 코드가 시간이 엄청 오래 걸리는 복잡한 코드라면 안쓰는것보다 쓰는것이 훨씬 좋다고 할 수 있는 것이다.

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

보다

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

로 했을때 조금이라도 html의 렌더링이 빠르다고 할 수 있다.
사실상 컴포넌트의 핵심 기능은 html렌더링이라
그 외 쓸때없는 기능들 예를들어 반복연산, 서버에서 데이터가져오는 작업, 타이머다는 것들은 거의다 useEffect안에다가 적는다.

useEffect 정리

1. 재렌더링마다 코드 실행

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

2. 컴포넌트 mount(로드)시 1회만 실행

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

3. useEffect안의 코드 실행 전에 항상 실행

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

4. unmount시 1회 실행

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

5.state1이 변경될 때마다 실행

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