[React.js] useLayoutEffect 와 useEffect의 차이점(리스트 초기 화면 깜빡임 해결)

react를 사용할 때 useEffect로 초기 데이터를 불러올 시 loading 여부를 확인해야 합니다.

List 페이지를 구현할 때 "데이터가 없습니다"가 뜬 다음 데이터가 뜨는 현상을 자주 겪었을 것입니다.

보통 loading 플래그를 사용해서 이를 해결했는데, 이 과정 없이 해결할 수 있는 방법이 useLayoutEffect입니다.

useLayoutEffect  사용방법은 useState와 동일합니다.

차이점을 간략히 설명드리겠습니다.

예를 들어,

useEffect(()=>{

    setData("data");

}, [ ] }

이렇게 초기 함수를 선언해주면 data은 화면이 모두 띄운 후 작동하게 됩니다. 즉, "데이터가 없습니다"를 화면에 띄운 후 깜빡임으로 변하면서  "data"를 띄웁니다 

하지만 useLayoutEffect를 사용하게 되면, 해당 함수를 화면을 로딩하기 전에 먼저 실행 후, 화면을 띄웁니다.

useLayoutEffect (()=>{

    setData("data");

}, [ ] }

변경하게 되면 깜빡임 증상이 없어집니다.

리스트 화면을 구현할 때 깜빡이는 증상을 해결하기 위해 useLayoutEffect를 사용할 수 있습니다.