TIL_개발일기
[TIL_개발일기_210413] a 클릭 영역 늘리기 / next에서 router.push()와 Link의 차이
dolphinSarah
2021. 4. 13. 23:44
728x90
a 클릭 영역 늘리기
a(anchor)의 기본 display는 inline이다. 그래서 부모의 영역이 넓더라도(예를 들어, 부모의 width가 500px이라고 하자), a태그의 width가 200px이라면, 클릭할 수 있는 영역의 width는 200px 밖에 되지 않는다.
하지만, anchor의 클릭 영역이 작으면 클릭하기가 불편하기 때문에, anchor가 부모의 영역만큼 차지하게 해주는 것이 좋다.
block은 width 값을 따로 부여하지 않을 경우, 부모의 100%만큼 width가 설정된다. (inline-block은 아님)
그래서, 다음과 같이 anchor의 display를 block으로 바꾸어주면, a의 클릭 영역을 늘릴 수 있다.
a {
display: block;
}
next에서 router.push()와 Link의 차이
결론부터 말하자면, SEO(검색엔진최적화)가 중요하다면 Link를 사용하는 게 좋다.
Link를 사용함으로써, 전체 페이지가 reload 되어 overriden(SSR)된다. 즉, Link를 사용했을 때 검색엔진의 크롤러는 Link가 다른 페이지로 이동하기 위함을 알 수 있고 검색엔진 최적화에 좋다.
router.push는 주로 이벤트 핸들러(ex. onClick)에서 사용된다고 한다. 그렇지만 단지 다른 페이지로 이동하기 위해서는 사용하지 않는 게 좋다.
즉, Link의 기능만으로 부족해서 router의 특정 기능이 필요한 게 아니라면 Link를 사용하는 게 좋다.
728x90