useEffect vs useLayoutEffect

이 글은 Kent C. Dodds 저자의 아래의 글을 바탕으로 작성되었습니다.

 

useEffect vs useLayoutEffect

useEffect vs useLayoutEffect

 

리액트 훅들 중 useEffect 와 useLayoutEffect 의 기능은 매우 유사합니다. 하지만 분명하게 다른 use case 를 가지고 있죠.

 

 

useEffect

 

사실 정말 대부분의 경우, 개발자들은 이 훅을 쓰게 될 것입니다. useEffect 는 컴포넌트의 렌더링이 모두 수행된 후 비동기적으로 동작하는 훅이며, 이를 통해 기존의 componentDidMount, componentDidUpdate, componentWillUnmount 를 대체할 수 있습니다. 기존의 클래스형 컴포넌트의 라이프사이클 메서드와는 달리 이 훅은 비동기적으로 동작하기 때문에 더 성능상으로도 좋은 선택이라고도 말할 수 있습니다.

그러나 useEffect 는 말씀드렸 듯, 브라우저가 컴포넌트를 완전히 렌더링(페인트까지 모두 끝남)시킨 후에나 일어나는 동작입니다. 따라서 useEffect 를 통해 수행하고자 하는 일이 만일 DOM 요소를 조작하는 것이라면, 그 작업이 무거울 경우 이용자는 컴포넌트가 렌더링 될때 아주 잠깐의 '깜빡임'을 경험할 수 있습니다. 이는 이미 렌더링된 컴포넌트에 대한 렌더링이 다시 '비동기적으로' 수행되기 때문입니다.

이런 경우, useLayoutEffect를 반드시 써야합니다.

 

 

useLayoutEffect

 

useLayout 은 useEffect 와는 정반대로 컴포넌트가 렌더링된 후 '동기적'으로 동작하는 훅입니다. 그러니 만일 DOM 요소의 특정 속성을 읽고 싶거나, DOM 요소의 무언가를 변경하는 작업을 하고 싶은 경우, 여기서 수행한다면 '깜빡임'없이 DOM 을 업데이트 하실 수 있습니다.

useLayoutEffect 가 '동기적'으로 동작한다는 특성에 의거해보면 다른 활용법도 생각해볼수 있습니다. 예를 들어 useEffect 보다 먼저 수행된다는 특성을 이용해서 ref 의 가장 최신의 값을 가져오는 일도 가능할 것입니다.