[React] useLayoutEffect

리액트에서 테트리스를 구현하기 위해 작업을 하던 중 블럭이 움직일 때 마다 깜빡임이 눈에 띄었다. 이 현상을 없애기 위해 구글링 중 useLayoutEffect에 대해 알게 되었고, 이를 통해 해결했다.

useLayoutEffect란?

공식문서에서 정의한 한마디는 브라우저에서 리페인트 전에 일어나는 버전의 useEffect라고 설명하고 있다.

즉, 실제로 DOM에 그려지기 전에 effect 내의 코드가 계산되고, 그 전까지는 브라우저에 그리는 동작을 block한다. 따라서 만약 시간이 오래걸리는 작업의 경우 성능에 악영향을 미칠 수 있으므로 필요한 경우에만 사용해야 한다고 한다.

• useEffect: 비동기적으로 실행
• useLayoutEffect: 동기적으로 실행

useLayoutEffect로 해결한 이유

내가 작성한 로직의 경우 state에 따라서 CSS를 다르게 보여줬고, 그 state의 값은 useEffect 내에서 정해졌다. 이 state는 1초마다 값이 바뀌는데, useLayoutEffect를 사용하면 DOM에 렌더링 되기전에 CSS 값을 정할 수 있어 깜빡임이 발생하지 않게 됐다.

참조: React 공식 문서