[next.js]Link 컴포넌트

Link 컴포넌트

리액트의 Link와 비슷하지만 몇가지 차이점이 있다

 

1. 라이브러리차이

• React Router의 Link: React Router 라이브러리에 속함.
• Next.js의 Link: Next.js 프레임워크에 포함됨.

2. 경로 설정

• React Router의 Link: to 속성으로 URL을 설정.  ex) <Link to="/about">
• Next.js의 Link: href 속성으로 URL을 설정함. ex) <Link href="/about">About</Link>

3. 페이지 로드 방식

• React Router의 Link: 페이지 전체를 다시 로드하지 않고 내부적으로 페이지를 바꿈.
• Next.js의 Link: 페이지 전환 시 자동으로 해당 페이지를 미리 로드하는 '프리패칭' 기능이 있어 더 빠른 로드가 가능.

---

Link 와 a태그 차이

1. a 태그를 사용하면 페이지를 이동할 때 페이지 전체를 다시 로딩(reload)하기 때문에 속도가 느리고 깜빡거림이 생긴다(네트워크 속도를 느리게하고 새로고침하면 하얀화면이 나왔다가 하나씩 랜더링됨)

 

2. Link 컴포넌트를 사용하면 Next.js 내부적으로 여러가지 최적화 해주기 때문에 빠르고 부드럽게 페이지 전환이 가능함