useEffect는 컴포넌트가 마운트 됐을 때(컴포넌트가 처음 렌더됬을 때), 언마운트 됐을 때 (컴포넌트가 사라질 때), 업데이트 됐을 때(특정 props가 바뀔 때) 특정 작업을 처리하는 방법이다.
[clean-up을 이용하지 않는 Effects]
export default function App() {
const [count, setCount] = useState(0);
useEffect(() => {
// 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
document.title = `You clicked ${count} times`;
});
// const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
You clicked ${count} times
}]를 effect라고 한다.[clean-up을 이용하는 Effects]
deps에 특정 값 넣기
useEffect vs componentDidMount
state와 props를 어떻게 capture하는지가 가장 다른점이다. 비동기 메서드를 사용할 때 확인할 수 있다.
useEffect : useEffect runs after the paint has been committed to the screen as opposed to before. This means you would get a flicker if you needed to read from the DOM, then synchronously set state to make new UI.