[ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(3)

2024.11.13 - [분류 전체보기] - [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(2)

[ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(2)

---

<Link> 컴포넌트, useRouter(),  <a>태그

Next.js에서 <Link> 컴포넌트를 사용할 수 있는데 <Link>는 HTML에서 <a> 요소 기능을 확장한 리액트 컴포넌트다.

<Link> 컴포넌트는 라우트間[페이지간] prefetching과 client-side navigation을 제공한다.

<Link> 컴포넌트는 Next.js에서 라우트간[페이지간] 이동하기 위한 주요 방법이다.

 

***React에서 <Link> 컴포넌트 사용하기

<Link> 요소의 내용물, <Link>의 열린 태그와 닫힌 태그 사이에 작성된 컨텐츠를 사용자가 클릭 또는 터칭함으로써(tapping)

다른 페이지로 이동하게 해준다. react-router-dom에서(--->React 애플리케이션에서 페이지간 이동을 관리하는 라이브러리) 제공하는 <Link> 컴포넌트는 <a> 요소를 생성하고, to로 엮은 자원(resource)을 가리키는 실제 href 속성을 가진, 접근가능한 <a> 요소를 렌더링한다 → <Link to={ user.id }>{ user.name }</Link>

 

***client-side navigation: React Router에서 <Link> 컴포넌트는 기본적으로 클라이언트 사이드 라우팅을 처리한다.

즉 URL이 변경되지만 페이지가 새로고침되지 않고, Javascript 코드만 실행되어 필요한 부분만[컴포넌트 부분 교체] 업데이트된다.

URL은 변경되지만 브라우저의 전체 페이지 리로드(reload)는 일어나지 않음, 필요한 컴포넌트만 업데이트될 뿐이다.

 

Next.js에서 <Link> 컴포넌트 사용하기

import Link from 'next/link'; // Link 컴포넌트를 import한다.

// ...
// 함수 컴포넌트 안, return부분의 XML파트에서

// href속성을 작성해 <Link>내용물을 클릭했을 때 href속성값으로 이동한다.
// Next.js는 파일 기반 라우팅으로, /-->app디렉토리를 의미,
// app 디렉토리내 movie 디렉토리내 검색할 영화 코드가 동적으로 전달되는데,
// 해당 코드가 디렉토리명 그리고 그 디렉토리 내부에 page.tsx파일이 존재해야 한다.
// 디렉토리명이 주소값이 된다.

/*
	파일구조
    
    app
    	/movie
        	/movieCd
            	-page.tsx
*/

<Link href={`/movie/${item.movieCd}`}>{item.movieNm}</Link>

 

<Link> 컴포넌트를 사용할 때 href 속성은 필수로 작성해야 하며,

href 속성 값의 타입은 문자열 또는 객체,  이동할 경로 또는 URL를 작성한다.

---

useLocation Hook

 

하나의 웹 페이지에서 다른 페이지로 이동할 때 Single Page Application(SPA)은 다른 접근 방식을 갖는다(takes a different approach) SPA는 클라이언트측(client side)에서 전달받은 새로운 요청에 기반하여 접근할 수 있는, 서버에 업로드된 복수의[여러 개의] HTML 파일들이 존재하는 멀티 페이지 어플리케이션과는 다르기 때문이다. Single Page Application은 서버에 업로드된 하나의 HTML 파일을 갖는다. 그리고 요청한 때에 만들어진 웹 페이지(html file)가 클라이언트 보내진다. SPA는 서버에 새로운 요청을 보내지 않고, 클라이언트 사이드 라우팅에서 유저가 직접 이동할 수 있도록 해준다. useLocation훅으로 특정 컴포넌트와 관련된 pathname, hash, state, key 또는 search로 접근하여 해당 값을? 얻을 수 있고, 웹 어플리케이션에서 side effects를 실행한다.

 

useLocation훅

리액트 라우터에서 useLocation훅은 리액트 컴포넌트의 현재 위치를 반환하는 것에 사용된다.

useLocation은 pathname, state, search, key, hash와 같은 속성을 가진 객체로 현재 위치를 반환한다.

 

이 속성들은(pathname, state, search, key, hash) useEffect훅에 사용될 수 있다.

useEffect훅을 사용하여 클릭 이벤트(click), 스크롤 이벤트(onScroll)와 같은 사용자의 상호작용을 감지하거나

(state parsed)분석된[처리된] 상태 값을 Link 컴포넌트로 반환하여 side effect를 수행한다.

 

1. useLocation훅을 사용하기 위해 먼저 react-router-dom으로부터 useLocation을 import해야한다.

import { useLocation } from 'react-router-dom';

 

2. useLocation을 생성하고[만들고], 'location' 변수로 useLocation훅을 대입한다.

const location = useLocation();

 

3. location 변수로 useLocation 속성에 접근할 수 있다.

```

const location = useLocation();

console.log(location);

 

```

location 변수에는 useLocation() 으로 생성된 객체가 대입된다.

 

정의한 'location' 객체는 현재 위치의 URL segment를 포함한 객체를 반환한다.

useLocation()로 생성된 객체의 pathname 속성 주어진 컴포넌트의 경로명을(path name) 반환하는 것에 사용된다.

경로명은 포트숫자 다음에 따라나온다. pathname은 컴포넌트의 경로명 → Next.js는 디렉토리명이 주소 값이니 pathname에

해당 컴포넌트가 존재하는 디렉토리명을 작성하면 된다. 예를 들어 movie/[movieCd]/page.tsx 이렇게 존재한다면 page.tsx로

이동하는 pathname은 `/movie/${movieCd}`로 작성하면 된다.

예를 들어 http://localhost:3000/movie/20001234 이 주소값에서 포트번호인 3000뒤에 작성된 '/movie/20001234' 이 값이

컴포넌트가 위치하는 디렉토리 경로이자 pathname이 된다.

***디렉토리명을 대괄호[]로 감싼게 있다면 동적 세그먼트 연결을 위해서다.

파라미터명으로 연결하기 위해서는, 동적으로 연결시키기 위해서는 [대괄호] 문법을 사용해야 한다.

 

```

const location = useLocation();

console.log(location.pathname); // dot notation으로 pathname에 접근하는 방법

 

// 객체 디스트럭처링으로 pathname에 접근하는 방법

const { pathname } = useLocation();

console.log(pathname);

 

```

state

state 속성은 React Router에서 url간 이동시에 데이터나 상태를 전달하는데 사용된다.

useLocation()으로 생성된 객체가 state 속성을 갖는다면 그 속성 값은 부모 컴포넌트로부터 전달받은 데이터나 상태다.

→ 부모 컴포넌트에서 데이터 설정에 사용된 state속성을 자식 컴포넌트에서 접근할 수 있다.

부모 컴포넌트에서 'state'를 설정하기 위해 'state'속성을 parse하고, 그것에 값을 할당한다

 

search

'location' 변수가 가리키는[참조하는] 객체에서 'search' 속성은 url에서 query string(쿼리 스트링)을 얻는데 사용된다.

query string은 URL에서 '?'기호 다음에 나오는 문자열로, key와 value가 한 쌍의 형태로, 여러 쌍이 있을 경우 &(엠퍼센드)로 구분된다. 이러한 여러 쌍의 key와 value를 파라미터라고 한다. 

---

useRouter - next/navigation

 

next/navigation에서 제공하는 useRouter와 next/router에서 제공하는 useRouter는 다르다.

여기서는 next/navigation에서 제공하는 useRouter를 다루겠다.

next/navigation에서 제공되는 useRouter는 파일 기반 라우팅[경로] 및 클라이언트 측 내비게이션을 다룬다.

 

1. 우선 next/navigation에서 useRouter를 import한다.

import { useRouter } from 'next/navigation';

 

2. useRouter훅을 사용하여 라우터 객체를 얻는다. 그리고 변수에 대입하여 해당 변수로 라우터 객체에 접근하여 사용한다.

const router = useRouter();

 

3. 생성된 useRouter의 객체가 갖는 메서드에 접근하여 라우팅[페이지 이동과] 관련된 작업을 한다.

대표적으로 push()는 string타입의 매개변수를 전달받는데, 그 값은 이동할 url이 된다.

router.push('/movie');

 

현재 next/navigation에서 제공되는 useRouter객체는 메서드 중심의 API다.

 

next/navigation에서 제공되는 useRouter훅은 클라이언트 컴포넌트안에서

programmatically 라우트를[페이지를/경로를] 변경하게 해준다.

useRouter 사용에 특정 요구를 갖고 있지 않다면 이동을 위해 <Link> 컴포넌트를 사용하는 것을 추천한다.

 

***

 

Next.js에서 사용자 (페이지) navigation(이동)의 핵심: <Link>와 useRouter -- next/navigation

Next.js 웹 어플리케이션 내에서 사용자 내비게이션을 구현하는 두 가지 주요 방법은

<Link> 컴포넌트와 next/navigation에서 제공하는 useRouter훅이다.

<Link> 컴포넌트는 일반 HTML의 <a> 태그의 기능과 유사하게 작동하지만

페이지를 미리 가져오는 prefetch 기능을 제공하기 때문에 더 빠른 페이지 전환을 가능하게 한다.

 

useRouter훅은 클라이언트 사이드에서 programmatically하게 경로를 변경할 수 있는 기능을 제공한다.

사용자의 이벤트에 따라 동적으로 페이지를 전환하고자 할 때 유용하게 사용할 수 있다.

useRouter훅은 클라이언트 사이드에서만 실행된다. 

 

***

useRouter훅 -- next/navigation, <Link> 컴포넌트 그리고 HTML의 <a>태그와의 차이 

useRouter훅은 <a> 태그를 만들지 않기 때문에

SEO에 불리하며, onClick과 같은 이벤트 핸들러와 같이 사용된다.

<Link> 컴포넌트는 <a>태그를 생성하기 때문에 크롤링이 가능하여 SEO 최적화에 유리하며

HTML의 <a> 태그는 페이지를 완전히 새로고침하기 때문에 성능(속도, 데이터 등)상의 문제가 있을 수 있다.

<a> 태그는 로그아웃할 때와 같이 페이지간의 이동에 데이터의 공유 등에 상관이 없을 때 사용한다.

 

왠만하면 <Link> 컴포넌트를 사용하는 것이 좋으며

SEO에 상관없이 SPA처럼 동작하게 하고 싶을 때는 useRouter훅을 사용한다(router.push())

---

참고

 

1. Next.js <Link> 컴포넌트: https://nextjs.org/docs/pages/api-reference/components/link#href-required

2. 리액트 라우터에서 useLocation: https://medium.com/@alexanie_/https-ocxigin-hashnode-dev-uselocation-hook-in-react-router-758a0a711308

3. Next.js에서의 링크 사용과 네비게이션: https://reactnext-central.xyz/blog/nextjs/link-and-navigation#google_vignette