UseEffect -React

1. useEffect 란?

 - react의 주요 임무는 화면을 렌더링하고 컴포넌트를 재사용 하는 것

 - effect는 side effect라고도 하는데 주요 임무 외에 처리하는 모든 것을 뜻함 ex) Http 리퀘스트

 - 특정 값이 변하면 실행하는 함수를 지정할 수 있다. (주기성 관리)

 - 응답으로 실행되는 행동에 도움이 된다. ex) input의 유효성 검사, 어떤 액션을 하면 로드되는 컴포넌트

 

2. 사용이유?

 - 값이 변할때마다 함수가 다시 사용되는 경우 트래픽이 과부화 될 가능성

 

3. 사용방법!

 

(1). useEffect import

 

import React, { useState, useEffect } from 'react';

 

(2). useEffect의 기본형식

useEffect(()=>{'실행될함수'},['의존성배열'])

 

의존성 배열에는 실행될 함수에서 변경 되는 값을 입력!

단, 다음은 넣지 않는다.

 

(a) state의 업데이트기능인 set~ X => 이미 const 로 값이 불변임을 보장받고 있다.

(b) 내장API, 내장함수 => 독립적이고 전역적으로 실행된다. ex) setTimeout

(c) 사용자 지정 변수 or 함수 

 

(3). useEffect 바로 사용해보기

  useEffect(() => {
    const validator = setTimeout(() => {
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    }, 800);
  }, [enteredEmail, enteredPassword]);

처음 렌더링될때 한번 실행된 이후 enteredEmail, enteredPassword가 변경될 경우에만 실행된다.

 

하지만 이렇게만 한다면 의존성 배열안의 수가 바뀔때마다 계속 실행됨 => return의 클린업 함수기능을 이용

 

(4). return 사용해보기

 

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

 

함수 자리 마지막에 위치하면 된다.

 

return의 클린업 함수는 함수가 재사용 될 때 사용된다.

 

ex) 처음 렌더링에 함수가 실행 ⇒ return 실행안됨 ⇒ 의존성배열의 값이 변함 ⇒ return 실행 ⇒ 함수 실행

 

고로 위의 예에서 800ms에 도달하지 않는 경우 계속하여 clearTimeout이 실행되어 이전의 setTimeout을 없애준다.

 

이 말은 800ms가 넘었을 때 한번 함수가 실행된다는 의미이다.