NextJS Link

개발공부/Next.js

soOoOnger 2022. 11. 7. 16:27

import { Fragment } from "react";

function NewsPage() {

return (

<h1>the news page</h1>;

<ul>

<li>

</li>

</ul>

</Fragment>

);

}

export default NewsPage;

리액트를 쓰는 이유

페이지 전체에 걸쳐 상태를 보존하면서도 빠르게 반응하여 사용자들을 만족 시키기 위해서이다.

대화형 UI를 구축해서 새 HTML 페이지를 요청할 필요가 없고 화면을 업데이트만 하면 된다 .(자바스크립트랑 리액트만 써서 )

하지만 위에 코드는 그렇게 하지 않고 새로운 페이지를 읽어 왔다. 이러면 저장했던 상태들이 없어질 수 가 있다.

리덕스 상태나 컨텍스트 상태등.. 새로운 페이지를 읽어왔기 때문에 전부 없어진다. 이건 싱글 페이지 애플리케이션이 아니다.

유지할려면 링크를 다르게 만들어야 한다.

next에서 제공하는 특수 컴포넌트를 활용하면 된다.

import Link from "next/link";(기본 내보내기 모듈)

// our-domain.com/news

import Link from "next/link";

import { Fragment } from "react";

function NewsPage() {

return (

{" "}

<h1>the news page</h1>;

<ul>

<li>

</li>

</ul>

</Fragment>

);화면애 보아

}

export default NewsPage;

a 앵커 태그 대신에 Link 사용하면 된다.

이러면 새 html 페이지를 가져오지 않고도 이동할 수 있다.

이게 싱글 페이지 애플리케이션이다.

화면에 보이는 컨텐츠를 실제로 리액트에서 다시 렌더링한 것이다.

link: 앵커 태그를 렌더링하고 이 앵커 태그에 하는 클릭을 감지해서 클릭을 하면 브라우저가 기본 동작으로 새 html 페이지를 받는 요청을 보내지 못하도록 한다. 대신에 불러올 컴포넌트를 읽어 들이고 url를 번경하여 페이지가 바뀐 것처럼 보이게 한다.

*싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.