useEffect, useLayoutEffect

두 훅은 사용법이 같고 콜백 함수는 훅이 실행될 때 처음 한번은 반드시 실행. 의존성 목록이 빈 배열 [ ] 일지라도 한 번은 콜백 함수를 호출.
의존성 목록이 변경될 때마다 콜백 함수를 계속 실행.

useEffect(콜백_함수,의존성_목록)
useLayoutEffect(콜백_함수,의존성_목록)
콜백_함수 = () => {
	return 반환_함수 //언마운트될 때 한 번만 호출
}

두 훅의 콜백 함수는 함수를 반환할 수도 있는데, 반환 함수는 컴포넌트가 언마운트될때 한 번만 호출.

차이점

useLayouteffect - 동기 (synchronous)

• 콜백 함수가 끝날 때까지 프레임워크가 기다림.

useEffect - 비동기(asynchronous)

• 콜백 함수의 종료를 기다리지 않음.

공식문서에서는 될수 있으면 useEffect 훅을 사용하고, useEffect로 구현이 안될 떄만 useLayoutEffect훅을 사용하라 권함.