[Next.js & React] 파일 기반 라우팅 작업하기

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다.

 

69. 모듈 개요

 

이번 섹션에서는 이벤트 앱을 간단하게 만들어보도록 하겠습니다. 이벤트 목록을 확인하고, 그 중에서 한 이벤트를 선택할 수도 있습니다.

 

1. Creat a Complete NextJS Project From Scratch
2. Add Static & Dynamic Routes
3. Add Regular Components & Connect Everything! 

 

70. 프로젝트 계획

• / : Startign PAge (show featured Events)
• /events: Events Page (show all Events)
• /events/<some-id : Event Detail Page (show selected Event)
• /evnets/,,,slug : Filtered Events Page (show filtered Events)

 

71. 메인 페이지 설정하기

메인 페이지 설정하기 

 

72. 더미 데이터 & 정적 파일 추가하기

이미지의 경우 반드시 public 폴더에 저장해야 합니다. 하위 폴더명은 꼭 images 일 필요는 없고, public 폴더에 저장해도 무방하지만 반드시 public 폴더에 있어야 합니다. public 폴더는 Next.js 프로젝트에서 특수한 역할을 합니다. 이 폴더에 저장되어 있는 이미지나 글꼴 같은 데이터들은 Next.js에서 정적(Static)인 데이터로 작용하기 때문에 CSS나 HTML 코드에서 참조할 수 있습니다. public 폴더에 이미지를 저장해두면 Next.js에서는 그 폴더에 저장된 모든 콘텐츠를 애플리케이션의 일부로 간주하기 때문에 정적인 콘텐츠로 활용할 수 있습니다. 

 

73.  React 컴포넌트 추가하기

components>event> event-item.js, event-list.js 파일을 추가합니다.  보통 애플리케이션과 JSX 코드를 구상할 때는 건물을 지을 때 쓰이는 벽돌처럼 여러 컴포넌트로 나누어서 컴포넌트를 합쳐 애플리케이션을 구축하는 습관을 들이는 것이 좋습니다. 

 

74. 더 많은 React 컴포넌트 추가하기 & 컴포넌트 연결하기

react 컴포넌트 추가 

 

75. Next.js 프로젝트 내에서 컴포넌트 스타일링 하기

Next.js 프로젝트는 module.css를 지원합니다. 빌드 프로세스가 CSS 코드를 추출해서 선택자를 바꾸고 해당 컴포넌트 HTML 코드에 범위를 지정한 다음 실행 중인 페이지에 주입합니다.  module.css 파일을 import 하기 위해서는, classes나 styles 중 하나를 입력해줘야 합니다.

 <li className={classes.item}></li>

.item {
  color: red;
}​

 

event-item_고유 해시가 붙은 클래스가 생겼음을 알 수 있습니다. 

 

UI 화면은 다음과 같습니다. 

76. 버튼 & 아이콘 추가하기

직접 눈에는 보이지 않지만, Link 태그가 자체적으로 앵커 태그를 렌더링 합니다. 사용자 지정 스타일을 적용하고자 한다면, 해당 앵커 태그는 직접 추가해줘야 합니다. 다음 코드에서는 Link 태그가 내부에 있는 앵커 태그를 감지하고 자체적으로 앵커 태그를 렌더링 하는 대신 추가된 앵커 태그를 렌더링 합니다.

 

본 앵커 태그에는 href 속성이 없습니다. 이는 Link 태그가 여기 입력된 내용에 따라 자체적으로 추가하기 때문입니다. 

export default function Button(props) {
  return (
    <Link href={props.link}>
      <a className={classes.btn}>{props.children}</a>
    </Link>
  );
}

 

77. "Event Detail" 페이지 추가하기 (동적 라우트)

useRouter hook을 next/router에서 임포트해 온 다음, router 객체를 포함하도록 useRouter를 호출합니다. router 객체에서 query 프로퍼티에 엑세스 할 수 있는데, 이 프로퍼티에는 해당 페이지로 이동하는 모든 동적 경로 segment가 key로 포함되어 있습니다. 

export default function EventDetailPage() {
  const router = useRouter();
  const eventId = router.query.eventId;
  const event = getEventById(eventId);

  if (!event) {
    return <p>No event found! </p>;
  }
  return (
    <Fragment>
      <EventSummary title={event.title} />
      <EventLogistics
        date={event.date}
        address={event.location}
        image={event.image}
        imageAlt={event.title}
      />
      <EventContent>
        <p>{event.description}</p>
      </EventContent>
    </Fragment>
  );
}

 

78. 일반적인 레이아웃 래퍼 컴포넌트 추가하기

현재 네비게이션 바가 없으므로 모든 페이지 컴포넌트에 맨 위에 <header>를 추가하는 작업을 해야 합니다. 

하지만 이 걍우에는 모든 페이지 컴포넌트에 동일한 코드를 반복해야 합니다. (중복!)

 

이 경우에 _app.js 파일이 중요한 역할을 합니다. 이 파일이 루트 컴포넌트로서 여러 페이지 컴포넌트가 렌더링 되는 곳이기 때문입니다. Nextj.js는 _app 컴포넌트를 이용해서 페이지 컨텐츠를 전달하고, 페이지를 이동할 때 콘텐츠를 표시해줍니다. 

 

_app.js

import "../styles/globals.css";
import Layout from "../components/layout/layout";

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

 

layout.js

import { Fragment } from "react";
import MainHeader from "./main-header";

function Layout(props) {
  return (
    <Fragment>
      <MainHeader />
      <main>{props.children}</main>
    </Fragment>
  );
}

export default Layout;

 

79. All Events 페이지 작업   

모든 이벤트가 보이는 페이지를 추가합니다. 이미 EventList 컴포넌트가 있으므로 편하게 재사용할 수 있습니다. 

import { getAllEvents } from "../../dummy-data";
import EventList from "../../components/events/event-list";

export default function AllEventsPage() {
  const events = getAllEvents();
  return (
    <div>
      <h1>All Events</h1>
      <EventList items={events} />
    </div>
  );
}

 

80. 이벤트 필터링을 위한 필터 양식 추가하기

필터링을 위해서 events-search.js와 module.css 파일을 추가합니다. 

import Button from "../ui/button";
import classes from "./events-search.module.css";

function EventSearch(props) {
  return (
    <form className={classes.form}>
      <div className={classes.controls}>
        <div className={classes.control}>
          <label htmlFor="year">Year</label>
          <select id="year">
            <option value="2021">2021</option>
            <option value="2022">2022</option>
          </select>
        </div>
        <div className={classes.control}>
          <label htmlFor="month">Month</label>
          <select id="month">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">Septemer</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </div>
      </div>
      <Button>Find Events</Button>
    </form>
  );
}

export default EventSearch;

 

81.  "Filtered Events" 페이지를 프로그래밍 방식으로 내비게이팅 하기 

현재는 form 버튼을 눌렀을 때 실행되는 작업이 아무것도 없습니다. submitHandler 라는 트리거 함수를 만들도록 하겠습니다. form 요소에 obSubmit 프로퍼티를 추가하고, submitHandler을 가리키도록 합니다. submitHandler는 form 제출 시 React를 통해서 실행됩니다. 

import { useRef } from "react";
import Button from "../ui/button";
import classes from "./events-search.module.css";

function EventSearch(props) {
  const yearInputRef = useRef();
  const monthInputRef = useRef();

  function submitHandler(event) {
    event.preventDefault();

    const selectedYear = yearInputRef.current.value;
    const selectedMonth = monthInputRef.current.value;

    props.onSearch(selectedYear, selectedMonth);
  }

  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <div className={classes.controls}>
        <div className={classes.control}>
          <label htmlFor="year">Year</label>
          <select id="year" ref={yearInputRef}>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
          </select>
        </div>
        <div className={classes.control}>
          <label htmlFor="month">Month</label>
          <select id="month" ref={monthInputRef}>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">Septemer</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </div>
      </div>

      <Button>Find Events</Button>
    </form>
  );
}

export default EventSearch;

 

82. Catch-All 페이지 상에서 데이터 추출하기 

uesRouter 훅을 사용하여, router.query.slug 에 엑세스 하여 값을 가져올 수 있습니다. 

export default function FilteredEventsPage() {
  const router = useRouter();
  const filterData = router.query.slug;

  if (!filterData) {
    return <p className="center">Loading...</p>;
  }

  const filteredYear = filterData[0];
  const filteredMonth = filterData[1];

  const numYear = +filteredYear;
  const numMonth = +filteredMonth;

  if (
    isNaN(numYear) ||
    isNaN(numMonth) ||
    numYear > 2030 ||
    numYear < 2021 ||
    numMonth < 1 ||
    numMonth > 12
  ) {
    return <p>Invalid filter. Please adjust your values! </p>;
  }

  const filteredEvents = getFilteredEvents({
    year: numYear,
    month: numMonth,
  });

  if (!filteredEvents || filteredEvents.length === 0) {
    return <p>No events found for the chosen filter! </p>;
  }

  return (
    <div>
      <h1>Filtered Events</h1>
    </div>
  );
}

 

83. 최종 단계 

위의 컴포넌트를 추가하여 스타일링적 요소를 추가했습니다. 

 

• Resluts Title Component
• Error Alert Component

 

 

84. 모듈 요약

Next.js 에서 라우팅이 어떻게 작동하는지, 여러 라우트를 통해 서로 다른 페이지 파일이 어떻게 읽히는지, 슬러그 라우트와 단일 동적 매개변수 라우트의 작동 방식에 대해 배웠습니다. 

 

라우터 액세스를 위해 useRouter hook 사용 방법 또한 살펴보았습니다. 라우터를 통해 프로그래밍 방식 네비게이션을 실행하거나 URL에 부호화된 데이터에 액세스 할 수도 있었습니다. 

 

---

https://www.udemy.com/course/nextjs-react-incl-two-paths/