[Hooks]useEffect

 

1.LifeCycle 

LifeCycle(생명주기)는 컴포넌트의 생성부터 변화,소멸까지의 과정을 나타낸다.

각각의 과정마다 특정한 작업을 수행 하여 원하는 동작을 수행할 수 있게해주는데,

이를 LifeCycle Method(생명주기 메서드)라고한다.

이러한 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있다.

함수형 컴포넌트에서는 useEffect를 사용하여 각각의 컴포넌트 상태에 대해 작업을 할 수 있다.

 

---

 

 

2.useEffect 사용 하기

useEffect는 생명주기의 상태인 마운트,업데이트,언마운트 중에 특정 작업을 수행할 수 있게 해준다.

이름에서 알 수 있듯 side Effect를 처리하기 위한 Hook이다.

side Effect란 프로그램 실행과는 독립적으로 발생하는 외부적인 변화를 말한다.

API를 호출하거나 DOM 요소 제어,HTTP요청 등이 Side Effect라고 할 수 있다.

 

✨useEffect의 형태

useEffect(function,[])

function 

    실행할 작업을 작성한다. 

[](의존성 배열 deps)

    의존성 배열에 값이 없는 경우 매 렌더링마다 함수가 실행된다.

    의존성 배열에 값이 들어간 경우 대상값이 업데이트될 때 함수가 실행된다.

 

✨useEffect 사용하기

1️⃣컴포넌트가 마운트되었을 때 실행

useEffect(() => {
  console.log("마운트될 때 실행.");
}, []);

의존성 배열을 넣지 않으면 컴포넌트가 렌더링 될 때 마다 실행된다.

useEffect(() => {
  console.log("업데이트 될 때마다 실행.");
});

2️⃣의존성 배열의 값이 변경될 때 실행

useEffect(()=>{
  console.log("state가 업데이트 될 때 마다 실행")	
},[state])

현재 이 코드는 마운트가 되거나 state가 변경되면 실행되는 상태이다.

마운트때 실행되지 않고 state가 업데이트될 때만 실행시키고 싶다면,

const mounted = useRef(false);
useEffect(()=>{
  if(!mounted.current){
    mounted.current = true;
  }else{
    console.log("state가 업데이트 될 때마다 실행)
  }
})

 

 

3️⃣언마운트 될 때 실행

useEffect(() => {
  console.log("마운트 될 때 실행")
  return () => {
    console.log("언마운트 될 때 실행.");
  };
});

이런식으로 함수를 반환 할 수 있다. 이것을 cleanup이라고 한다.

이것을 활용해 타이머를 설정하거나 해제하는 작업을 할 수 있다.