Link

Next.js는 Link 컴포넌트를 제공하여 클라이언트 사이드 네비게이션을 가능하게 하며, 페이지 전환 시 사용자 경험을 대폭 향상시킵니다. 또한, 이번 학습에서는 활성화된 링크를 표시하는 방법도 함께 작성해보겠습니다.  1. Link 컴포넌트: 클라이언트 사이드 네비게이션기존 HTML의 태그를 사용하면 페이지 이동 시 전체 새로고침이 발생합니다. 하지만 Next.js의 Link 컴포넌트를 사용하면 클라이언트 사이드에서 페이지가 전환되며, 새로고침 없이 빠르고 매끄러운 전환이 가능합니다.import { UserGroupIcon, HomeIcon, DocumentDuplicateIcon,} from '@heroicons/react/24/outline';import Link from 'next/lin..

리액트를 사용할 때 HTML 의 태그 처럼 페이지를 이동해야 경우에는 React Router 를 사용해야 합니다. 오늘은 리액트에서 페이지 이동을 처리하는 방법인 React Router 대해 공부해보겠습니다 ! 먼저 라우팅이라는 용어가 익숙하지 않을텐데 쉽게 설명하자면 사용자가 요청한 URL에 따라 다른 뷰를 보여주는 것으로 React Router 는 리액트에서 가장 많이 쓰이는 라우팅 라이브러리 입니다. (리액트 자체에는 이 기능이 내장되어 있지 않음 ) 리액트는 SPA 방식을 채택하고 있어 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태입니다. 이러한 특징을 고려하여 React Router 는 페이지를 새로 로드하지 않고 하나의 페이지 내에서 렌더링 해줍니다. SPA..