[React.js] Kossie Coder - 6강. useEffect 사용하기

1. useEffect

화면이 렌더링 될 때마다 실행되는 Hook

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

function App() {
	const [count, setCount] = useState(0);
	const [kossie, setKossie] = useState(0);

	// deps array에 count 변수를 넣어서 count가 rendering될 때만 실행되게 한다.
	// deps array를 쓰지 않으면 모든 rendering이 일어날 때마다 실행된다.
	useEffect(() => {
		console.log(count);
	}, [count]);

	// deps array를 empty로 주게 되면 단 한 번만 실행되게 한다.
	useEffect(() => {
		console.log('first rendering');
	}, []);

	const increment = () => {
		setCount(count + 1);
	};

	return (
		<div className="App">
			<button onClick={increment}>Click</button>
			<button onClick={() => setKossie(kossie + 1)}>Click1</button>
		</div>
	);
}

export default App;

---

강의 링크

https://youtu.be/pvTuVXlrGUY