랜더링이 되면 useEffect 함수 실행
import React, { useEffect, useState } from 'react';
const App = () => {
const [isChecked, setIsChecked] = useState(false);
// 처음 화면에 마운트 되었을 때 실행되고 그 이후에는 화면이 재랜더링 되면 함수 실행
useEffect(() => {
/*
결과 : render
그 다음 버튼을 누르면 계속 결과는 render이다.
*/
console.log("render");
});
// 재랜더링을 위한 이벤트 핸들러 생성
const handleOnClick = () => setIsChecked(!isChecked);
// 버튼을 누르면 화면 재랜더링
return <button onClick={handleOnClick}>Click</button>
}
export default App;
import React, { useEffect, useState } from 'react';
const App = () => {
const [isChecked, setIsChecked] = useState(false);
// 두 번째 인자로 빈 배열을 입력
useEffect(() => {
// 첫 랜더링인 경우에만 실행
console.log("render");
}, []);
const handleOnClick = () => setIsChecked(!isChecked);
// 버튼을 클릭해도 콘솔창에 render가 호출되지 않음
return <button onClick={handleOnClick}>Click</button>
}
export default App;
import React, { useEffect, useState } from 'react';
const App = () => {
const [isChecked, setIsChecked] = useState(false);
const [num, setNum] = useState(0);
// 두 번째 인자의 값에 state인 num을 입력
useEffect(() => {
// 첫 랜더링인 경우와 num이 변경될 때만 실행
console.log("render");
}, [num]);
// num + 1을 해주는 이벤트 핸들러
const updateNum = () => setNum(num + 1);
// isChecked를 변경해주는 이벤트 핸들러
const updateIsChecked = () => setIsChecked(!isChecked);
return <div>
<div>
<span>{num}</span>
<button onClick={updateNum}>numUpdate</button>
</div>
<button onClick={updateIsChecked}>isCheckedUpdate</button>
</div>
}
export default App;
import React, { useEffect, useState } from 'react';
const App = () => {
const [isChecked, setIsChecked] = useState(false);
const updateIsChecked = () => setIsChecked(!isChecked);
return <div>
{/* isChecked에 컴포넌트를 랜더링 */}
{isChecked ? null : <Log/>}
<button onClick={updateIsChecked}>isCheckedUpdate</button>
</div>
}
const Log = () => {
// 컴포넌트를 사용하지 않을 경우 return 값으로 반환하는 함수 실행
useEffect(() => {
return () => {
// 컴포넌트가 언마운트 될 때마다 실행
console.log("Log");
}
})
return <span>Log</span>
}
export default App;