next.js Components

컴포넌트로 내 코드 정리하기

현재 html 페이지 코드를 집어넣은 상태라서 각 페이지의 코드가 상당히 길어져있는데, 이를 컴포넌트별로 나눠서 구현을 하고자 한다.

app 폴더 내부에 componenets폴더를 생성하고 각 페이지들이 사용하는 컴포넌트들 만들어서 import 하는 방식으로 코드를 작성한다.

NavBar

            <nav className="flex pb-2 border-b text-reg">
              <Link href="/restaurant/milestones-grill" className="mr-7">
                {' '}
                Overview{' '}
              </Link>
              <Link href="/restaurant/milestones-grill/menu" className="mr-7">
                {' '}
                Menu{' '}
              </Link>
            </nav>

해당 코드를 export 함으로써 페이지에서는 NavBar 컴포넌트를 import 하여 사용하면

        {/* NAVBAR */}
        <NavBar />
        {/* NAVBAR */}

페이지에서는 코드가 이렇게 줄어들수 있다.

다른 컴포넌트들도 마찬가지로, 페이지에 작성했던 코드들을 컴포넌트화 시켜서 페이지의 코드를 간단하게 정리할수 있다.

Header

import { useRouter } from 'next/navigation'
import { useState } from 'react'

export default function Header() {
  const router = useRouter()
  const [location, setLocation] = useState('')
  return (
    <div className="h-64 bg-gradient-to-r from-[#0f1f47] to-[#5f6984] p-2">
      <div className="mt-10 text-center">
        <h1 className="mb-2 text-5xl font-bold text-white">Find your table for any occasion</h1>
        {/* SEARCH BAR */}
        <div className="flex justify-center py-3 m-auto text-lg text-left">
          <input
            className="rounded  mr-3 p-2 w-[450px]"
            type="text"
            placeholder="State, city or town"
            value={location}
            onChange={(e) => setLocation(e.target.value)}
          />
          <button
            className="py-2 text-white bg-red-600 rounded px-9"
            onClick={() => {
              if (location === 'banana') {
                alert('무슨 바나나야;;;')
                return
              }
              router.push('/search')
            }}
          >
            Let's go
          </button>
        </div>
        {/* SEARCH BAR */}
      </div>
    </div>
  )
}

header의 경우는 useState 와 useRouter를 사용해서 navigate 기능을 구현했으므로 컴포넌트화 시킬때 같이 가져와서 사용해야한다.

Card, Cards

card와 cards에 해당하는 내용을 컴포넌트로 변경한다. card들을 담아놓은 곳을 cards라고 정의했으니까 card를 먼저 컴포넌트로 변경해보자

import Link from 'next/link'
import React from 'react'

export default function RestaurantCard() {
  return (
    <div className="w-64 m-3 overflow-hidden border rounded cursor-pointer h-72">
      <Link href="/restaurant/milestonse-grill">
        <img
          src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
          alt=""
          className="w-full h-36"
        />
        <div className="p-1">
          <h3 className="mb-2 text-2xl font-bold">Milestones Grill</h3>
          <div className="flex items-start">
            <div className="flex mb-2">*****</div>
            <p className="ml-2">77 reviews</p>
          </div>
          <div className="flex font-light capitalize text-reg">
            <p className="mr-3 ">Mexican</p>
            <p className="mr-3">$$$$</p>
            <p>Toronto</p>
          </div>
          <p className="mt-1 text-sm font-bold">Booked 3 times today</p>
        </div>
      </Link>
    </div>
  )
}

이렇게 정리해면 페이지 코드가 이렇게 짧아진다

import Link from 'next/link'
import NavBar from './components/NavBar'
import Header from './components/Header'
import RestaurantCard from './components/RestaurantCard'

export default function Home() {
  return (
    <main className="w-screen min-h-screen bg-gray-100">
      <main className="m-auto bg-white max-w-screen-2xl">
        {/* NAVBAR */}
        <NavBar />
        {/* NAVBAR */}
        <main>
          {/* HEADER */}
          <Header />
          {/* HEADER */} {/* CARDS */}
          <div className="flex flex-wrap justify-center py-3 mt-10 px-36">
            {/* CARD */}
            <RestaurantCard />
            {/* CARD */}
          </div>
          {/* CARDS */}
        </main>
      </main>
    </main>
  )
}