[React] useEffect 사용하기

useEffect

useEffect( 실행함수 , [모니터링 대상] )

바로 실행함수를 실행하고, 모니터링할 대상의 변수가 변했을 경우 실행함수를 재실행합니다. 

아래 예제를 살펴봅시다. 

 

1. useEffect( 실행함수, [] ) 

모니터링 대상을 비웠을 경우 한번만 실행합니다. 

소스 코드

import React from 'react';

 

// useEffect(실행함수, [모니터링대상없음]) : 컴포넌트 한번만 실행됨

function Component1(){

    const [base, Func] = React.useState(0);

  React.useEffect(() => {  

    Func(base+1); 

    console.log('컴포넌트 한번 반복');

  }, []);

  return  (

    <div>

        <h3>{base}</h3>

    </div>

    )

}

결과

 

2. useEffect( 실행함수 , [모니터링 대상] )

모니터링 대상이 변경이 일어났을 경우 실행함수를 재실행 합니다. 

결과 창을 보면 계속 숫자가 올라가는 것을 확인할 수 있습니다. 

 

소스 코드

// useEffect(실행함수, [모니터링대상]) : 함수실행하면 base가 +1되면서 다시 컴포넌트가 실행 --> 계속 반복

function Component2(){

    const [base, Func] = React.useState(0);

  React.useEffect(() => {

    Func(base+1);

    console.log('Base가 계속 변하기 때문에 무한 반복');

  }, [base]); 

  return  (

    <div>

        <h3>{base}</h3>

    </div>

    )

}

 

export {Component1,Component2};

 

결과