React Lifecycle & useEffect - 2

React useEffect dependency array

useEffect 에서 두번째 파라미터를 옵션으로 dependency array값을 설정할 수 있다.

useEffect 에서 dependency array 를 선언하면 useEffect가 mount된 후

선언된 배열속 값이 변경될때마다 실행하게된다.

// useEffect 함수
useEffect(()=> {
    setTimeout(() => { setTemp(false); }, 2000);
 
  // dependecy array값으로 mount된 후 count의 값이 변경될때 실행된다.
  
  console.log('hello')
}, [count]);

 

count를 클릭 할 때마다 hello 로그가 찍힌다.

dependency array에 값을 넣지않고 선언만 해두면 1회만 실행된다.

 

  useEffect(()=> {
    let timer = setTimeout(() => { setTemp(false); }, 2000);
    console.log('hello');

  // dependency arry에 값을 넣지않았다
  }, [])

count라는 변수가 선언되어있지않아 증가 되어도 실행이 되지않는다.

 

 

 

반응형

 

 

 

cleanup function

cleanup function 이란 useEffect의 return 함수로

컴포넌트가 실행이 되기전에 실행되는 함수로 렌더링이 될 때 함수가 실행된다.

대표적으로 메모리 누수(memory lack)을 해결하기위해 실행중이거나 실행된 useEffect의 로직을 초기화 할때 사용한다.

return () => {
  ...
}

useEffect 속 return 함수로 문법으론 return() => {} 이렇게 사용한다.

 

  useEffect(()=> {
    let timer = setTimeout(() => { setTemp(false); }, 2000);
    console.log('hello');
    
    // return 함수로 cleanup function을 만들었다.
    return () => {
      console.log('clean up')
      clearTimeout(timer);
    }

  }, [count])

 

count 를 클릭할 때 마다 cleanup function 함수가 실행되어 clean up 콘솔이 나타나고

그 다음 useEffect 함수가 실행되어 hello 콘솔이 나타난다.

 

useEffect(() => { })	// 재랜더링마다 코드가 실행된다.
useEffect(() => { }, [])	// mount시 한번 코드가 실행된다.
useEffect(() => {	// unmount시 한번 코드가 실행된다.
  return() => {
  
  }
}, [])