[React Hooks] useEffect( )

useEffect( )

• side effect를 다룰때 사용하는 hooks

       sideEffect란?

          - 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위         

          - 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지

            이 모든 것이 sideEffect에 해당한다.

• 페이지가 처음 렌더링 되고 난후 한번 무조건 실행된다.
• useEffect에 배열로 지정한 useState의 값이 변경되면 실행된다.

 

 

useEffect 함수의 첫번째 인자 :  렌더링 이후 실행할 함수 

useEffect 함수의 두번째 인자 : dependency array(의존성 배열)

 

 

1. useEffect(( )=> { } )    : 항상 렌더가 된 직후에는 무조건 안의 함수 실행

2. useEffect(( )=> { } , [ ])  :  최초(마운트 될 때)에만 실행이 된다.

          뒤 빈 배열([ ])은 어떤것도 주시하거나 의존하지 않고 있다는것을 의미

3. useEffect(( )=> { } , [특정 변수 또는 오브젝트])  변수가 변화하면 실행된다.

 

import { useEffect } from "react";
const App = () => {
  const [value, setValue] = React.useState("");
  useEffect(() => {
    let timer = setTimeout(() => console.log(value), 3000);
  }, [value]);

  return (
    <input
      type="number"
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
};

value가 변할때마다 useEffect가 실행되면서 timer가 실행된다.

 

useEffect(() => {
    let timer = setTimeout(() => console.log(value), 3000);
  }, [value]);

 

 

cleanUp 

 - useEffect()에서 parameter로 넣은 함수의 return 함수이다.

 - useEffect에 대한 뒷정리함수라고 생각하면 된다.

 

import { useEffect } from "react";
const App = () => {
  const [value, setValue] = React.useState("");
  useEffect(() => {
    let timer = setTimeout(() => console.log(value), 3000);
    return () => {
      clearTimeout(timer);
    };
  }, [value]);

  return (
    <input
      type="number"
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
};

 

마운트 될때를 제외하고 

return () => {
      clearTimeout(timer);
    };

return () =>{ } 이 먼저 실행되고  

  let timer = setTimeout(() => console.log(value), 3000);

그다음 앞의 것들이 실행이 된다.

 

 

 

1.  언마운트 될 때만 cleanup 함수를 실행하고 싶을 때

         - 두번째 인자에 빈 배열을 넣는다.

 

2.  특정값이 업데이트 되기 직전에 cleanUp 함수를 실행하고 싶을 때

         - 두번째 인자로 배열 안에 검사하고 싶은 값을 넣어준다.