useLayoutEffect 예시

2번째 인자가 빈 배열일 경우

useLayoutEffect(() => {
  console.log("useLayoutEffect");
}, [])

useEffect 함수의 2번째 인자인 디펜던시가 빈 배열일 경우 1번째 렌더링 후에만 실행된다.
리렌더링 시에는 실행되지 않는다.

2번째 인자에 상태 변수가 등록돼있을 경우

const [name, setName] = useState('');
useLayoutEffect(() => {
  console.log("useLayoutEffect");
}, [name])

상태 변수 name이 업데이트 될때만 useLayoutEffect 함수가 실행된다.
상태 업뎃 -> 리렌더링 -> useLayoutEffect -> 페인팅.

2번째 인자가 없을 경우

const [name, setName] = useState('');
useLayoutEffect(() => {
  console.log("useLayoutEffect");
})

모든 렌더링 이후마다 실행된다. 이 말은 모든 상태 업데이트에 반응한다는 말이기도 하다.