[useEffect] 컴포넌트 마운트 , 언마운트 제어

useEffect

• 컴포넌트가 화면에 처음 나타나고, 사라지게 될 때를 제어할 수 있다.

• 컴포넌트의 props나 상태가 바뀌어서 업데이트 되기 전과 될 때에도 작업을 할 수 있다.

• 리렌더링 될 때마다 작업도 할 수 있다.

useEffect(()=>{
    (수행되는 작업)
}, [의존되는 값들])

의존되는 값의 배열이 비어있으면, 컴포넌트가 처음 생성될 때에만 작업이 실행된다.

컴포넌트가 화면에서 사라질 때는 return 해서 코들를 작성해주면 된다.

useEffect(() => {
  // mount
  console.log('컴포넌트가 화면에 나타남');
  
  return() => {
    // unmount
    console.log('컴포넌트가 화면에서 사라짐');
  }
}, [])

mount와 unmount

🤔 mount 는 어디에 쓰이나요?

• 받아온 props를 객체의 state로 설정해줄때
• REST API로 작업을 처리할 때
• d3 video 같은 라이브러리를 사용할 때
• setInteval, setTimeout을 사용할 때

🤔 Unmount는 어디에 쓰이나요?

• 뒷정리 함수라고 생각하면 된다.
• clearInterval, clearTimeout
• 라이브러리 인스턴스 제거

useEffect 의존성 추가하기

useEffect(() => {
  console.log(user);
},[user])

의존성에 user를 추가하면, user의 특정값이 변경될 때마다 user 객체가 출력된다.

useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return() => {
    console.log('user 값이 바뀌기 전');
    console.log(user);
  }
},[user])

user 값이 변경되기 전과 변경된 직후의 값을 가져올 수도 있다!

정리

• hooks인 useEffect 함수를 이용해 컴포넌트가 생기고, 사라질 때를 제어할 수 있다.

  import {useEffect} from 'react';

useEffect(() => {
  (컴포넌트가 생길 때 수행 작업);
  return {
      (컴포넌트가 사라질 때 수행 작업);
  }
}, [의존성])

의존성을 추가해서, 값이 변경되기 직전 / 변경된 직후의 값을 제어할 수 있다.