useEffect, useLayoutEffect(feat. SSR 환경)
useEffect() 리액트의 useEffect()는 해당 스코프의 컴포넌트가 render와 paint 된 후 호출되는 리액트 라이프사이클 훅이다. 비동기적으로 실행되고 로직에 DOM에 영향을 주는 코드가 있을 경우 사용자는 화면의 깜빡임을 확인할 수 있다. useLayoutEffect() useLayoutEffect()는 컴포넌트가 render가 되고 호출된다. paint 전에 호출 된다는 점이 useEffect()와 다른데,. 만약 DOM에 영향을 주는 로직(setState)이 있을 경우 화면에 그려지기 전 실행되므로 사용자는 깜빡임을 경험할 수 없다. 주의할 점은 useLayoutEffect는 동기적으로 실행되므로 로직이 처리되는 시간 동안 사용자는 빈화면을 볼 수밖에 없으므로 목적에 맞게 잘 사용..
2023.02.01