[React] Effects

#6 Effects

 

stae 변경시 모든 코드가 재실행되는 예시

 

• useEffect

컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 때 사용

ex) API를 통해 데이터 가져올 때

 

import { useState, useEffect } from "react";

➣ import에 useEffect 추가

 

 

<useEffect 사용 코드>

const iRunOnlyOnce = () =>{
    console.log("CALL THE API...");
  }
useEffect(iRunOnlyOnce,[]);

 

< 위 코드를 짧게 고친 코드>

 

console.log("i run all the time");
  useEffect(() => {
      console.log("CALL THE API..")
    }, []);

 

➣ useEffect 2개의 인자 가진다

첫 번째 인자 : 실행될 함수

두 번째 인자 :  업데이트될 특정 데이터

*[ ] 일 경우 코드 단 한 번만 실행

  [keyword, counter] 여러 개 가능

  → keyword, counter 변화 시 실행

 

useEffect 사용 후 실행 페이지

---

 

<useEffect 2>

 

       위 실행의 문제 : click버튼 누를 때마다 영화 검색 시킨다

 

 useEffect(() => {
      if(keyword !== "" && keyword.length > 5){
        console.log("SEARCH FOR", keyword);
      }
    },[keyword])

 

위 코드 실행 페이지

 

• Cleanup funtion

그냥 function, 컴포넌트가 없어질 때도 실행

많이 사용하지는 않음

function Hello(){
  useEffect(()=> {
    console.log("created :) ");
    return () => console.log("destroyed :("); 
  },[]);
  return <h1>Hello</h1>

 

➣ function을 return

 

Show 실행 페이지

 

Hide 실행 페이지