useEffect는 componentWillUnmount, componentDidmount, componentWillUpdate 와 비슷하다. (동일한 function)
export default function App() {
const sayHello = () => console.log("hello");
useEffect(() => {
sayHello();
})
const [number, setNumber] = useState(0);
const [aNumber, setAnumber] = useState(0);
return (
<div className="App">
<h1>Hi</h1>
<button onClick={() => setNumber(number + 1)}>{number}</button>
<button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
</div>
);
}
button을 클릭시 onClick 이벤트가 발생하며 number와 aNumber가 실시간으로 갱신되며
console.log 로 "hello"가 출력된다. ( 버튼을 누르면 sayHello()가 실행 )
>> useEffect는 componentDidmount / componentWillUpdate 의 역할을 해서 새로고침시 sayHello() 실행
useEffect는 함수를 호출하지 않고 함수명만 호출하여도 사용가능
useEffect(sayHello, [number]);
useEffect(effect, deps)
만약 deps가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변하도록 활성화
>> number값을 가지고있는 경우에만 sayHello()를 실행/업데이트 ( 기본적인 dependency )
const sayHello = () => console.log("hello");
useEffect(sayHello, [number]);
const [number, setNumber] = useState(0);
const [aNumber, setAnumber] = useState(0);
위와 같은구조로 작성시 useEffect 호출X
const sayHello = () => console.log("hello");
const [number, setNumber] = useState(0);
const [aNumber, setAnumber] = useState(0);
useEffect(sayHello, [number]);
number값 선언 이후에 useEffect 호출O
useEffect(sayHello, [ ]);
deps값이 빈 배열일 경우에 최초 페이지 로딩시 한번만 실행 된 이후에 호출X
useEffect로부터 리턴되는 값은 function ( componentWillUnmount )
import React, { useState, useEffect } from "react";
export default function App() {
const sayHello = () => console.log("hello");
const [number, setNumber] = useState(0);
const [aNumber, setAnumber] = useState(0);
useEffect(sayHello, [number]);
return (
<div className="App">
<h1>Hi</h1>
<button onClick={() => setNumber(number + 1)}>{number}</button>
<button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
</div>
);
}
전체코드
