useEffect

React 의 라이프 사이클 내에서 컴포넌트가 렌더링된 특정 작업을 수행하기 위한 용도로 useEffect를 사용한다. DOM이 완전히 형성된 이후에 작업이 이루어지는 점을 이용해, 개발자는 api요청에 대한 응답 데이터를 기반으로 DOM을 조작하여 구현하고자 하는 컴포넌트를 형성했다.

문제는 기본 컴포넌트의 페인팅이 된 이후에 비동기적으로 실행되는 것이기 때문에, useEffect 내부에 DOM 형태에 영향을 주는 코드가 있을 경우, 플리커링이 발생할 수 있다는 단점이 있다.

useLayoutEffect

useLayoutEffect 는 useEffect 의 이러한 문제점을 개선한 기능으로, DOM 형성 이후, 페인팅이 이루어지기 전에 호출되어 결과를 컴포넌트에 반영하기 때문에, 플리커링의 문제를 해결한다. 단, useLayoutEffect 는 컴포넌트 페인팅이 이루어지기 전에 DOM 을 조작하기 때문에 성능저하가 있을 수 있고, 코드가 길어질수록 TTV 가 더 늦어질 수 있다.

결론

일반적으로는 useEffect 를 사용하자. 단 현재의 코드에서 플리커링이 발생하며, 실제 useLayoutEffect 를 반영하였을 때 성능저하가 크지 않는 경우에는 useLayoutEffect 를 사용하는 것이 좋을 듯 하다.