useEffect 와 useLayoutEffect 와 useRef

원티드 프리온보딩 4월

원티드에서 운영하는 프리온보딩 4월차의 두번째 강의를  듣고 정리하는글입니다

많은 설명들을 해주셨지만 그중에서 제일궁금했던건 useEffect를 사용안해도 된다라는글을 보고 설명을 들어서입니다

https://react.dev/learn/you-might-not-need-an-effect

You Might Not Need an Effect – React

리액트 공식문서에서도  useEffect가 필요하지 않을수도 있다 라고 글이나와있어서입니다

일단 프리온보딩 4월에서의 강사님께서 해주신말씀들중엔 useEffect를 아예 사용하지말라는 의견보다는 적재적소에 맞게 사용을해야한다 라고 해주셨습니다

그러면서 useEffect와 useLayoutEffect , useRef 에대해 설명해주셨습니다

글에대해 다 다뤄보기엔 말로 해주신부분이라 기억하고있는 부분을 작성해보려합니다

 

useEffect와 useLayoutEffect의 차이

 

https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5

[React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?

위의 블로그에서 내용을 가져왔습니다

 

useEffect

useEffect 는 컴포넌트들이 render 와 paint 된 후 실행됩니다. 

비동기적(asynchronous) 으로 실행됩니다.

paint 된 후 실행되기 때문에, useEffect 내부에 dom 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다

 

useLayoutEffect

useLayoutEffect 는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다.

이 작업은 동기적(synchronous) 으로 실행됩니다.

paint 가 되기전에 실행되기 때문에 dom 을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

 

이외에도 useLayoutEffect의 경우 useEffect보다 먼저 실행되는걸 아래의 사진에서 알수있게되었습니다

로컬호스트에서 실행한 리액트 웹

로컬호스트 콘솔에서 확인한 console.log

useLayoutEffect 는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거칩니다.

따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있어,

기본적으로는 항상 useEffect 만을 사용하는 것을 권장하는데 에시로는 

• 데이터 fetch
• event handler
• state reset

등 작업은 항상 useEffect를 써야한다고합니다

 

useLayoutEffect의 경우는 state값이 존재하고 해당 state의 조건이 첫 paninting시 다르게 렌더링 할경우 useEffect를 사용하게도면 처음에 0이보여지고 re-rendering이 일어나 화면이 깜빡거리기때문에 이런경우엔 useLayoutEffect를 사용하는것이 바람직하다고 합니다

 

그리고 강사님이 useEffect의 사용이 줄어들어 된다는 이유는 useRef를 사용하여 줄어든다고 하였습니다

useRef의 경우 저장은 하나 렌더링이 필요하지않은경우 데이터를 저장해둘시에 사용한다고 하셨습니다 ( 예 : webRTC 방 유지 등 )

useRef의 사용법

제가 사용했던 useRef는 웹페이지의 주소에서 쿼리값을 가져오거나 DOM요소를 선택해야할때 사용하였습니다

이외에도 강사님이 저장하고 렌더링이 필요하지않을때에는 useRef에 저장한다고 하셔서 이에대한 글을 찾아 아래의 글을 가져오게되었습니다

 

https://powerku.tistory.com/entry/React-useRef-DOM-%EC%9A%94%EC%86%8C%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-Hook

[React] - useRef() DOM 요소에 접근할 수 있는 Hook

useRef는 React Hook API 중의 하나입니다

DOM요소에 접근하거나, 상태값을 저장할때 사용하는 API이며 내부 current 변수에 저장한다고 합니다