[ 리액트(React) ] useLayoutEffect, useEffect의 차이점 실험으로 쉽게 알아보기

📍 useLayoutEffect, useEffect의 차이점 알아보기

react를 사용할 때 paint screen 단계 이후 즉, 컴포넌트가 화면에 렌더링 된 이후 사이드 이펙트(side Effect) (여기서 말하는 사이드 이펙트는 컴포넌트 내에서 데이터 가져오기, 구독 설정하기, 수동으로 컴포넌트의 DOM을 조작하는 작업 등을 말한다.)를 비동기적으로 호출할 때 주로 useEffect를 사용한다.

 

(아래 사진은 github에서 가져온 hook-flow 사진인데, `flow`를 한눈에 알 수 있어서 가져와봤다.)

 

 

다시 본론으로 돌아가서 화면에 state의 값이 바뀌어서 화면이 깜빡이거나 DOM을 호출하기 전에 무언가를 변경하고 싶을 때는 어떻게 해야 할까? paint screen 단계 이전 즉, 화면이 그려지기 바로 전에 값을 동기적으로 호출하고 싶다는 생각이 들면 useLayoutEffect hook을 사용하면 된다.

 

정말로 useLayoutEffect는 화면에 그려지기 전에 실행되는지 궁금하여 간단한 실험을 진행했다. 만약, localStorage에 저장된 값을 불러오는 작업을 사이드이펙트로 관리한다고 했을 때, useEffect, useLayoutEffect 중 어떤 코드로 작성해야 적합할까? 잘모르겠다면 하단의 gif를 보고 어떤 gif가 useEffect 혹은 useLayoutEffect를 사용했을지 한번 고민해보자.

 

 

 

너무 쉬웠는가? 정답은 첫번째 gif가 바로 useLayoutEffect를 사용한 코드이고 두 번째 gif는 useEffect를 사용한 코드이다. 어떤 차이점이 있는지 눈을 크게 뜨고 보면 보일 텐데, 두 번째 gif는 화면에 렌더링 된 이후에 localStorage 값을 가져오기 때문에 처음에는 빈 공간이었다가 렌더링이 끝나면 화면이 움직이면서 값이 채워지는 것을 알 수 있고 반면에, 첫번째 gif는 브라우저에 그려지기 전에 로직을 실행하므로 말끔하게 가져오는 것을 알 수 있다.

 

결론적으로 렌더링 이전에 무언가를 하고싶다면 useLayoutEffect를 사용하고, 렌더링 이후에 무언가를 하고싶다면 useEffect를 사용하는 편이 적합하다. 하지만 언제나 그렇듯 반례는 충분히 존재하므로, 무작정 따라 쓰는 것보다 왜 이것을 써야 하는지, 현재 나의 상황에 맞게 사용하는 것이 더 중요하다고 생각한다.

 

글을 마치면서 이런 세세한 부분까지 신경 써야 해..?라는 생각이 들 수도 있다. 그러나 위의 실험과 같이 데이터 값이 작은 경우에는 미미할 수 있지만 실제 배포 이후 값이 커져 브라우저가 조금이라도 느려지게 된다면 지금과 같은 모습이 확연하게 보일 것이고 이는 곧 고객의 경험성으로 이어질 수 있다. 남들보다 경쟁력 있는 front-end가 되려면 이런 디테일한 부분까지 캐치할 수 있어야 한다고 생각한다.

 

reference

1. react-docs-hooks-effect