[React] useEffect

react는 정보가 수정될때 그 정보만 업데이트 된다는 장점이 있다. 이 장점을 십분 활용하기 위해서는 어떤 정보가 변화할때 화면이 새로고침되는지 정해놓을 필요가 있다. 정보가 수정될 때마다 화면에 나타난 모든 정보를 다시 받아오는건 비효율적이기 때문이다.

어떤 정보가 수정되는지 확인하기 위해 react에서는 useEffect를 지원한다. useEffect()는 이런식으로 동작한다.

useEffect(()=>{
	console.log('i run when keyword changes')
},[keyword]);

이 코드는 keyword 변수가 변화할때만 console.log()를 찍는다.

(alias) useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void
import useEffect
Accepts a function that contains imperative, possibly effectful code.

@param effect — Imperative function that can return a cleanup function

@param deps — If present, effect will only activate if the values in the list change.

react js에서 제공되는 useEffect()에 대한 설명이다.
먼저 useEffect를 import한다.

import { useEffect} from "react";

const[movie,setMovie] = useState([]);
useEffect(()=>{
	console.log(movie);
    //movie를 콘솔로 찍는다
},[movie])
//movie 배열이 변화할때마다

useEffect(()=>{
	fetch('https://... ')
},[])
//이런 식으로 dependencyList를 빈 배열로 하면 최초 한번만 동작하게 만들수 있다.
// 페이지 로드시 한번만 사용하는 api를 부를때 사용할 수 있다.