index.jsx
import { useEffect, useState } from "react";
import Timer from "../../src/timer";
export default function useEffectPracticePage() {
const [input, setInput] = useState("");
const [timerValid, setTimerValid] = useState(false);
useEffect(() => {
// 컴포넌트가 렌더링 될 때마다, 실행
console.log("컴포넌트가 렌더링 될 때마다, 실행");
});
useEffect(() => {
// 컴포넌트가 마운트 될 때 === 첫 화면에 렌더링 될 때, 실행 (최초만)
console.log(
"컴포넌트가 마운트 될 때 === 첫 화면에 렌더링 될 때, 실행 (최초만)"
);
}, []);
useEffect(() => {
// 컴포넌트가 마운트 될 때, 배열안의 value의 값이 바뀔 때 마다 실행
console.log(
"컴포넌트가 마운트 될 때, 배열안의 value의 값이 바뀔 때 마다 실행"
);
}, [input]);
const onChangeInput = (e) => [setInput(e.target.value)];
return (
<div>
<div>인풋의 값: {input}</div>
<input type={"text"} value={input} onChange={onChangeInput} />
<br />
{timerValid && <Timer />}
<button onClick={() => setTimerValid(!timerValid)}>타이머 열/닫기</button>
</div>
);
}
timer.js
import { useEffect } from "react";
export default function Timer() {
useEffect(() => {
const timer = setInterval(() => {
console.log("타이머가 실행중입니다!");
}, 1000);
/* 최초에 interval 함수를 useEffect로 불러왔기 때문에,
타이머를 닫아도 콘솔에 타이머가 작동하는 것을 볼 수 있다.
따라서 clearInterval 함수로 타이머를 종료해주는 함수를 써야한다.
*/
return () => {
clearInterval(timer);
console.log("타이머 종료");
};
}, []);
return <div>타이머입니다 콘솔창을 확인하세요</div>;
}