[Next.js] Next의 Link와 MUI(Material-UI)의 Link 차이

Intro

안녕하세요. 이번시간에는 Next의 Link와 MUI(Material-UI)의 Link 차이점에 대해 알아보겠습니다. 

 

Next의 Link와 MUI(Material-UI)의 Link

Next.js + React + MUI 조합으로 개발경험이 있으신 분들이 꽤 있으실 텐데요, 개발하다보면 Link 컴포넌트를 거의 필수로 사용하게 됩니다. Next.js와 MUI 에는 공통으로 Link 컴포넌트가 들어있습니다.

 

보통 자동 IDE 툴을 사용하면 자동으로 import 하는 경우가 많은데요, 꼭 확인하고 import를 하셔야 합니다. Next.js의 Link와 MUI(Material-UI)의 Link는 목적이 다른 요소이기 때문입니다. 

 

Why?

Next.js의 Link 컴포넌트 

Next.js의 Link 는 클라이언트 측에서 페이지를 전환하는 데 사용됩니다. 이는 페이지 전환을 할 때 클라이언트 사이드 라우팅을 처리하여 페이지 로드 시간을 최적화합니다. Link 컴포넌트는 보통 Next.js의 pages 디렉토리에 있는 다른 파일로 이동하는 데 사용됩니다.

 

MUI의 Link 컴포넌트 

MUI의 Link 는 HTML a 태그와 유사한 역할을 합니다. 컴포넌트 사용 시 사용자를 다른 URL로 이동시키는 데 사용됩니다. 이는 일반적으로 단순한 하이퍼링크를 만들기 위해 사용됩니다.

 

Conclusion

Next.js에서는 Link 구성 요소를 사용하여 클라이언트 사이드 라우팅을 처리하고 페이지를 전환하며, MUI의 Link 구성 요소는 단순한 하이퍼링크를 만들기 위해 사용되므로 용도에 따라 잘 사용하셔야 합니다 :)