공식문서30 [공식문서] NextJS 페이지 간 이동하기 #5 클라이언트 측 탐색 Link 컴포넌트는 같은 Next.js 앱 내의 두 페이지 간의 클라이언트 측 탐색을 가능하게 합니다. 클라이언트 측 탐색은 페이지 전환을 JavaScript를 사용하여 처리하는 것을 의미하며, 브라우저에 의한 기본적인 탐색보다 빠릅니다. 다음과 같은 간단한 방법으로 이를 확인할 수 있습니다. 브라우저의 개발자 도구를 사용하여 의 배경 CSS 속성을 노란색으로 변경하세요. 링크를 클릭하여 두 페이지 간을 이동하세요. 노란색 배경이 페이지 전환 사이에 유지되는 것을 볼 수 있습니다. 이를 통해 브라우저가 전체 페이지를 로드하지 않으며 클라이언트 측 탐색이 작동함을 알 수 있습니다. 대신에 를 사용한 경우에는 브라우저가 전체 새로 고침을 수행하기 때문에 링크 클릭 시 배경 색상이 지워질 .. 2023. 8. 14. [공식문서] NextJS 페이지 간 이동하기 #4 링크 컴포넌트 웹 사이트에서 페이지 간에 링크를 걸 때는 HTML 태그를 사용합니다. Next.js에서는 애플리케이션의 페이지 간에 링크를 걸 때 Link 컴포넌트인 next/link를 사용할 수 있습니다. 는 클라이언트 측 탐색을 수행하며, 탐색 동작을 더 세밀하게 제어할 수 있는 프롭(props)을 받을 수 있게 해줍니다. 사용하기 먼저, pages/index.js 파일을 열고 다음과 같이 Link 컴포넌트를 next/link에서 가져옵니다. 파일 상단에 다음 줄을 추가하세요. import Link from 'next/link'; 그런 다음 다음과 같이 보이는 h1태그를 찾습니다. Welcome to Next.js! 그리고 다음과 같이 변경하세요. Read this page! 다음으로, pages/p.. 2023. 8. 14. [공식문서] NextJS 페이지 간 이동하기 #3 Next.js에서의 페이지들 Next.js에서 페이지는 pages 디렉토리의 파일로 내보낸 React 컴포넌트입니다. 페이지는 파일 이름을 기반으로 경로와 관련됩니다. 예를 들어, 개발 환경에서 : pages/index.js는 / 경로와 관련됩니다. pages/posts/first-post.js는 /posts/first-post 경로와 관련됩니다. 이미 pages/index.js 파일이 있으므로 pages/posts/first-post.js를 만들어 보겠습니다. 새 페이지 만들기 pages 디렉토리 아래에 posts 디렉토리를 생성하세요. posts 디렉토리 안에 first-post.js라는 파일을 만들고 다음 내용으로 채워넣으세요: export default function FirstPost() { r.. 2023. 8. 14. 이전 1 2 3 4 다음
