Next.js 에서 Antd 를 이용 할때 uselayouteffect warning이 뜰 경우

Next.js에서 Antd를 이용할때 waring이 뜨는 문제가 생겼다.

 

"Warning: useLayoutEffect does nothing on the server, because its effect cannot be encded into... "

 

먼저 useLayOutEffect와 useEffect의 차이를 먼저 보겠다.

 

LifeCycle 상 layoutEffect 는 동기적으로 수행되기때문에,

모든 화면이 그릴 준비가 완료된 후에 실행된다.

 

장점은 dom에 영향을 주더라도 화면이 그려진 뒤에 수행되기때문에

깜빡임이 없다는 것이고

 

단점은 그만큼 동기적으로 수행하기때문에 화면을 보기까지 시간이 

오래걸린 다는 것이다.

 

반대로 useEffect는 비동기적이지만, dom에 영향을 주는 요소가

있다면 깜빡임이 발생할수 있는 대신 화면을 빠르게 보여 줄 수 있다.

리액트에서는 useEffect를 권장하고 있다.

next.js 에서 antd를 이용할때의 waring

결국 useLayoutEffect를 Antd가 사용하면서 생기는 문제였는데,

Antd가 useLayoutEffect를 이용하기때문에 어쩔 수 없나 싶었지만

검색을 좀 걸친 결과, Antd의 버전을 4.8버전으로 이용하면 문제가 사라졌다.

 

@버전을 치면 해당 버전으로 설치가 된다.

Antd를 어떨결에 이용하고있지만,

추후 버전에서는 개선되지않을까?