[Next.js] /pages - 라우팅

1. 라우팅

- 라우팅 설정  : /pages 폴더에 파일을 만들면 파일의 경로에 따라 경로가 설정됨.

 

1-1. 정적 페이지 라우팅

- 폴더에 파일을 만드는 것만으로 경로가 자동 설정됨.

pages/index.jsx
import Link from "next/link";

const App = () => {
	return(
        <div>
            <h2>Link to 'sample' Page</h2>
            <Link href="/sample">
            	<a>Move to '/sample'</a>
            </Link>
        </div>
    );
}

export default App;

/pages/sample.jsx
import Link from "next/link";

const Sample = () => {
    return (
        <div>
            <h2>Link to 'main' Page</h2>
            <Link href="/">
                <a>Move to '/'</a>
            </Link>
        </div>
    )
}

export default Sample;

 

1-2. Link 컴포넌트

- 넥스트에서 주소 이동을 할때는 주로 Link 컴포넌트를 사용하게됨.

- Link 컴포넌트는 DOM을 가지진 않지만 자식인 <a>태그를 클릭하면 클라이언트 측 내비게이션을 실행하여 페이지 전체를 새로 불러오지 않고 주소를 이동할 수 있음.

- Link 컴포넌트를 사용하여 주소 이동을 하면 브라우저의 History API를 지원함으로써 뒤로가기 시 새로운 컴파일 시간을 갖지 않고 이전에 렌더링된 페이지를 가져옴.

* Link 컴포넌트를 사용하지 않고 <a> 태그만으로 주소이동을 하면? 
- 페이지 전체를 새로 받아오게되어 속도가 느려지고, 깜박임도 발생
- 뒤로가기를 하여도 페이지를 새로 받아옴.

* Link컴포넌트만 사용하고 <a>태그를 사용하지 않는다면?
- Link 컴포넌트로 감싼 기본적인 html 태그는 라우팅 기능을 수행하지만 웹접근성과 SEO에 좋지 않음.

* Link 컴포넌트에 리액트 컴포넌트를 사용하면 ?

//* 리액트 컴포넌트
const Child = () => {
    return <p>Move to '/sample'</p>
};

<Link href="sample">
    <Child />
</Link>​

- 리액트 컴포넌트를 클릭해도 라우팅되지 않음.
- 리액트 컴포넌트에 라우팅 기능을 주려면 <a> 태그로 감싸야함.

 

1-3. 동적 페이지 라우팅

- 파일이름을 대괄호로 감싸서 만들면, 동적 페이지임을 의미함.

- 대괄호에 감싼 이름은 임의의 값이 될수 있음.

 

- /pages/test/[name].jsx 생성

/pages/test/[name].jsx

import Link from "next/link";

const name = () => (
    <div>
        <h2>Hello!!</h2>
        <Link href="/"> Move to '/' </Link>
    </div>
)

/pages/index.jsx
import Link from "next/link";

const App = () => {
    return (
        <div>
            <h2>Link to 'hello' Page</h2>
            
            <Link href="/test/hello">
                <a>Move to '/test/hello'</a>
            </Link>
            
            <!-- next 9.5.3 이전 버전 -->
            <Link href="/test/[name]" as="/test/hello">
                <a>Move to '/test/hello'</a>
            </Link>
        </div>
    );
};

export default App;

 

- 파일 이름에서 대괄호에 있는 값은 라우터 객체(router)의 query 속성으로 들어가게됨.

- next/router의 useRouter(라우트 객체를 리턴함)를 훅스를 사용해 확인할 수있음.

/pages/test/[name].jsx

import Link from "next/link";
import { useRouter } from "next/router";

const name = () => {
    const router = useRouter();
    console.log(router);
    //query 속성안에 {name: "hello"}값이 들어있음.
    
    return (
        ...
    );
}

export default name;

 

 

1-4. 라우터 객체를 이용한 라우팅

- 주소 이동을 항상 Link 컴포넌트를 사용하지 않음.

- 함수 내에서 라우트 이동을 하게되는 경우도 있음*

- 라우터 객체는 다양한 함수를 제공하고, 주소 이동을 위한 함수도 제공.

- 라우터 객체 안에는 push, replace, back 등의 함수를 이용해 주소를 이동할 수 있음.

 

 (1)  router.push

  - 자주사용.

  - 첫번째 인자에 pathname

  - 두번째 인자에 asPath : (next 9.5.3 버전 이하) 동적 주소 이동시 asPath를 전달해야 클라이언트 네비게이션이 작동함.

  - 세번째 인자에 options 전달.

 

/pages/index.jsx
import { useState } from "react";
import { useRouter } from "next/router";

const App = () => {
    const [name, setName] = useState("");
    const router = useRouter();
    
    return (
        <div>
            <!-- /sample 페이지로 이동(정적이동) -->
            <button type="button" onClick={ () => router.push("/sample")}>
                sample로 가기
            </button>
            
            <!-- input 으로 입력받은 텟트르 주소로 이동(동적이동) -->
            <p>이름</p>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              style={{ marginRight: "12px" }}
            />
            <button type="button" onClick={ () => router.push(`/test/${name}`) }>
                {name}으로 가기
            </button>
        </div>
    );
}

export default App;

/pages/test/[name].jsx
import Link from "next/link";
import { useRouter } from "next/router";

const name = () => {
    const { query } = useRouter();
    
    return(
        <div>
            <h2>hello!! {query.name}</h2>
            <Link href="/">Move to '/'</Link>
        </div>
    );
}

* useState Hooks
- 함수형 리액트 컴포넌트에서 리액트의 state 상태를 관리하기 위해 사용하는 Hooks
- 반환값인 배열의 첫번째 값에 상태값, 두번째 값에 상태값을 바꿀 수 있는 함수를 리턴.
- input value={name} 에 텍스트를 입력하면 nam의 상태 값은 setName 함수로 인해 값이 변경되고 컴포넌트는 리렌더링함.

import { useState } from "react";

const [name, setName] = useState();​