[ReactJS] useEffect

컴포넌트는 state가 변경될 때 마다 계속 실행된다. useEffect는 한번만 실행이 필요한 코드를 사용하여 첫 렌더링 시점에만 실행되도록 만들어준다.

 

useEffect가 필요한 경우 
API를 통해 데이터를 가져올 경우 첫 번째 컴포넌트에서 렌더링할 때 API를 call하고, 이후에 state가 변환할 때, 그 API값을 또 다시 가져오지 않게 하기 위해 사용

 

 

---

1. useEffect는 두개의 파라미터를 가진다.

• 첫 번째 param : 콜 백함수 (실행하고 싶은 함수 )
• 두 번째 param : dependency , 원하는 state가 변경될 때 실행되게 만든다. “[]”로 주게되면 최초 렌더링 시점에만 실행되게 된다.
  dependency란?  react.js가 지켜보아야 하는 것들을 말한다.

 

 

 

2. 사용 방법  

import { useState, useEffect } from "react";

function App() {
	const [counter, setValue] = useState(0);
	const [keyword, setLeyword] = useState("");

	const onChange = (event) => setKeyword(event.target.value);
	const onClick = () => {setValue((prev) => prev+1);
	console.log("렌더링 될 때 마다 실행됨");
	
	useEffect(() => {
		console.log("첫 번재 렌더링에만 실행 됨");
	}, []);

	useEffect(() => {
		if(keyword !== "") {	
			console.log("keyword가 변경될 때 마다 실행됨");
		}
	}, [keyword]);

	useEffect(() => {
			console.log("keyword 또는 counter 가 변경될 때 마다 실행됨");
	}, [keyword, counter]);


	return (
		<div>
			<input value={keyword} onChange={onChange} type="text" placeholder"Search..." />
			<h1>{counter}</h1>
		</div>
	);
}

 

 

 

3. Cleanup 

컴포넌트(JSX)가 사라지거나 없어질 때 실행되게 만들어주는 함수

useEffect(() => {
	console.log("create");  
	
	return () => console.log("destroy"); 
},[]);

• 컴포넌트가 파괴(destroy)될 때 function을 실행하고 싶으면, useEffect 함수에 새로운 function을 return해 주면 된다.