Gatsby에서 내부 페이지로 이동할 때 Link Component를 써야 하는 이유
Anchor Tag(<a href="링크">텍스트</a>)
- 이동하는 페이지를 전부 로딩한다
- 그렇기 때문에 이동하면서 번쩍거린다
- 부자연스러워 보인다
Link Component
Gatsby’s <Link> component enables linking to internal pages as well as a powerful performance feature called preloading.
출처: https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-gatsby-link
- 내부 페이지 안에서 이동할 때 미리 로딩을 해서 자연스럽게 보이게 한다
- gatsby 모듈에 정의되어 있다
- 링크로 이동할 때 (이질감 없이) 훨씬 자연스럽게 이동한다
사용하는 법
1. gatsby 모듈로부터 Link를 import한다
import { Link } from 'gatsby'
2. Anchor Tag의 a를 Link로 바꾸고 href를 to로 바꾼다
<!-- anchor tag -->
<a href="/new_page">Go to new page</a>
<!-- link component -->
<Link to="/new_page">Go to new page</Link>
+ Active Style을 사용하면 내가 어떤 링크에 이동해있는지 표시하는 것을 쉽게할 있다.
currently-active-link
+ gatsby 내부 페이지가 아니라 트위터, 페이스북 같은 외부 페이지로 이동할 때는 상관이 없으니 Anchor Tag를 사용하면 된다.