🌱 성장일지 11.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

• 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
• 성장하고 있는 것이 살아 있는 것이다.
• 생명의 유일한 증거는 성장이다!

(11.0) 어떤 제약 없이 편하게 기록하고 남기자.

React

• react-router-dom 으로 라우팅

Next.js

• 라우팅을 위한 js 코드를 작성하지 않음
• 특별한 폴더에 컴포넌트 파일을 작성한다.
• 프로젝트의 폴더 구조를 라우팅으로 가져간다.

pages 폴더를 확인

/pages/index.js ⇒ home/ 으로 인식

/pages/about.js ⇒ home/about

index 파일만 해당 폴더 자체를 라우팅으로 갖는다.

/pages/products/index.js ⇒ home/products

/pages/products/[id].js ⇒ 동적 경로를 다룬다. home/products/1(2, 3, 4 등등)

위의 방식 자체가 File-based Routing

page 역할을 하는 파일은 export default로 내보낸다.

pages 폴더 내에서 about.js를 만들면 이 파일명 자체가 라우팅 주소가 된다.

혹은 폴더를 만들고 그 안에 index.js를 만들면 해당 폴더 이름을 가진 주소가 라우팅된다. 여러 세그먼트로 이뤄진 경로를 설정할 때, 폴더를 만든다. 그런데 portfolio/list 경로의 페이지를 만들고 싶으면 portfolio를 폴더로 만들고 그 안에 list 파일을 둬야할 수 밖에 없다.

동적 경로!

portfolio가 여러개라면

/portfolio/[id].js 를 하면 된다.(id가 아닌 다른 문자열도 된다.)

대괄호가 있는 동적파일보다 정적파일을 우선시한다.

id 값을 가져와서 사용하려면 어떻게 해야할까?

`import { useRouter } from 'next/router'로 할 수 있다.

만약 class 컴포넌트를 사용한다면 withRouter로 컴포넌트를 감싸서

라우터 프로퍼티를 컴포넌트에 주입할 수 있다.

const router = useRouter();

console.log(router.pathname);
console.log(router.query);
// { id: 123 } 과 같은 객체가 나온다

대괄호를 가진 폴더이름

clients

• index.js
• [id]
  • index.js
  • [clientproject].js (클라이언트 별로 다른 프로젝트들이 있을 수 있으니까)

마찬가지로 [clientproject].js 파일에서

const router = useRouter();

console.log(router.pathname);
console.log(router.query);
// { id: jayden, clientprojectid: 123 } 과 같은 객체가 나온다

Catch-All 라우트

blog

• […slug].js ⇒ slug가 아니어도 되긴 함!

이렇게 하면 blog/2020도 blog/2020/12 도 blog/2020/12/16 도 다 잡을 수 있다.

[…slug.js] 파일에서 아래와 같이 하고 ‘/blog/2020/12’ 를 가면

const router = useRouter();

console.log(router.pathname);
console.log(router.query);
// { slug: ['2020', '12'] } 가 나온다.

Link 컴포넌트로 네비게이팅하기

브라우저에 url을 입력하기만 하는 네비게이팅은 사실상 거의 없음

• 링크를 타고 가든가
• 특정 행동에 따라 가든가

anchor 태그를 사용해서

<a href="/portfolio">ㅎㅎㅎ</a>

위와 같이 해도 잘 동작한다. 그렇지만 이 방법은 새로운 페이지를 불러오기 위해 새로고침하는 것과 동일

즉, 앱 상에서의 state가 휘발되어버린다.

import Link from 'next/link';

Link 컴포넌트에는 몇가지 꼼수가 있다.

• 링크에 마우스를 올리자마자 미리 링크로 이동할 곳에서의 데이터 패칭을 한다든지 등등
• replace: 새로운 페이지로 띄움
• href: 네비게이팅하려는 path

Link href를 설정하는 다른 방법

<Link
  href={{
    pathname: '/clients/[id]',
    query: { id: client.id },
  }}
>
  {client.name}
</Link>

프로그래밍 방식(코드 상에서)으로 네비게이팅하기

보통은 버튼을 만들고 네비게이팅하는 액션을 onclick에 주는 것보다 그냥 Link를 사용하는 걸 추천한다. 그런데 어떤 데이터를 로드하고 네비게이팅한다든지 어떤 작업을 할 때 사용한다.

const router = useRouter();
router.push('path');

404 페이지 추가하기

pages/404.js 만들면 된다.

function NotFoundPage() {
  return (
    <div>
      <h1>Page not found!</h1>
    </div>
  );
}

File based routing vs Code based routing

File based routing

• 라우팅에 대해 추가로 작성해야할 코드가 없다.
• 라우팅에 대해 직관적이다.
• file과 folder 만으로 라우팅 관리가 된다.

Code based Routing

• 라우팅에 대한 보일러 플레이트가 필요하다.(파일 시스템을 안보고 이 코드만 보면 파악된다. 이게 편리할 수도 있다.)
• 익혀두면 직관적이다.(처음엔 귀찮지만)
• file과 folder 구조에 의존하지 않아도 된다.