⛳ useEffect

useEffect 라는 Hook은 컴포넌트가 mount(처음 나타났을 때), unmount(사라질 때), update(특정 props가 바뀔 때)됬을 때 특정작업을 처리할 수 있다.
=>리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 해준다.

useEffect(function, deps)

mount 되었을 때

렌더링 될 때 한번만 실행하고 싶다면 deps 위치에 빈 배열을 넣어준다.
배열을 생략한다면 리렌더링 될 때 마다 실행된다.

import React, {useEffect} from 'react';
export default function Userlist () {
  useEffect(() => {
    console.log('mount');
  }, []);
  // deps에 빈배열 : 처음에만 함수 호출
  // deps가 아예 없음 : 컴포넌트가 리렌더링 될 때 마다 호출
  // deps에 특정값 : 처음과 지정값이 변경될 때 호출
  return ();
  // cleanup 함수
  // useEffect 안에서 return 할 때 실행된다.
  // useEffect 뒷정리(state에서 값 지울 때)
}

🤷🏻‍♀️어떨때 사용할까?

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API요청
• 라이브러리 사용
• setInterval와 같은 반복작업 또는 setTimeout같은 작업 예약
  

unmount될 때

useEffect(() => {
  console.log('effect');
  console.log(name);
  return () => {
    console.log('cleanup');
    console.log(name);
  };
}, []);

🤷🏻‍♀️어떨때 사용할까?

• setInterval, setTimeout작업 clear하기
• 라이브러리 인스턴스 제거
  

update될 때(특정 props, state가 바뀔 때)

특정값이 업데이트 됬을때 실행하고 싶다면 deps위치의 배열 안에 검사하고 싶은 값을 넣어주면 된다.

import React, {useEffect} from 'react';
export default function Userlist () {
  useEffect(() => {
    console.log(name);
    console.log('update');
  }, [name]);
  return ();
}

update될때도 실행되지만 mount될때도 실행된다.
따라서 다음과 같이 적어줄 수 있겠다.

const mounted = useRef(false);
useEffect(() => {
  if(!mounted.current){
    mounted.current = true;
  } else {
    // want code
  }
}, [바뀌는 값]);