RedwoodJS는 CLI로 파일을 자동으로 만들어주는 기능을 제공한다.
스프링도 이런 선진문물을 적극 받아들이길

yarn redwood generate page home /

위와 같이 패키지에 페이지 관련 파일이 생겼다!
.test 파일은 테스트코드인듯 하다.

실제 렌더링을 시도하면 이 화면이 나타난다.

Route.tsx

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

Route.tsx를 통해 각 path마다 보여줄 page를 설정할 수 있다.

Index.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
ul {
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 1rem 0 0 ;
}
h1 > a {
  text-decoration: none;
  color: black;
}
button, input, label, textarea {
  display: block;
  outline: none;
}
label {
  margin-top: 1rem;
}
.error {
  color: red;
}
input.error, textarea.error {
  border: 1px solid red;
}
.form-error {
  color: red;
  background-color: lavenderblush;
  padding: 1rem;
  display: inline-block;
}
.form-error ul {
  list-style-type: disc;
  margin: 1rem;
  padding: 1rem;
}
.form-error li {
  display: list-item;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-between button {
  display: inline;
}

index.css를 통해 전역적으로 사용될 스타일을 정의한다.
이제 다음 페이지를 만들어보자.

about 페이지 만들기

yarn redwood generate page about

home에서 라우팅할 수 있는 about이라는 페이지를 만들어보자.

AboutPage.tsx

import { Link, routes } from '@redwoodjs/router'
import { Metadata } from '@redwoodjs/web'

const AboutPage = () => {
  return (
    <>
      <Metadata title="About" description="About page" />

      <header>
        <h1>Redwood Blog</h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <p>
          This site was created to demonstrate my mastery of Redwood: Look on my
          works, ye mighty, and despair!
        </p>
        <Link to={routes.home()}>Return home</Link>
      </main>
    </>
  )
}

export default AboutPage

HomePage.tsx

import { Link, routes } from '@redwoodjs/router'
import { Metadata } from '@redwoodjs/web'

const HomePage = () => {
return (
<>

  <header>
    <h1>Redwood Blog</h1>
    <nav>
      <ul>
        <li>
          <Link to={routes.about()}>About</Link>
        </li>
      </ul>
    </nav>
  </header>
  <main>Home</main>
</>

)
}

export default HomePage

이처럼 프런트엔드의 경우 리액트를 통해 화면을 그릴 수 있다.

Layout

레이아웃은 어떻게 만들까?

yarn redwood g layout blog

참고로 g는 generate의 축약어이다.

BlogLayout

import {Link, routes} from '@redwoodjs/router'

type BlogLayoutProps = {
  children?: React.ReactNode
}

const BlogLayout = ({children}: BlogLayoutProps) => {
  return <>
    <header>
      <h1>Redwood Blog</h1>
      <nav>
        <ul>
          <li>
            <Link to={routes.about()}>About</Link>
          </li>
        </ul>
      </nav>
    </header>
    <main>{children}</main>
  </>
}

export default BlogLayout

AboutPage.tsx

import { Link, routes } from '@redwoodjs/router'
import { Metadata } from '@redwoodjs/web'

const AboutPage = () => {
  return (
    <>
      <Metadata title="About" description="About page" />

      <p>
        This site was created to demonstrate my mastery of Redwood: Look on my
        works, ye mighty, and despair!
      </p>
      <Link to={routes.home()}>Return home</Link>
    </>
  )
}

export default AboutPage

HomePage.tsx

import { Metadata } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <Metadata title="Home" description="Home page" />
      Home
    </>
  )
}

export default HomePage

Routes.tsx

import { Router, Route, Set } from '@redwoodjs/router'
import AboutPage from './pages/AboutPage/AboutPage'
import BlogLayout from 'src/layouts/BlogLayout'

const Routes = () => {
  return (
    <Router>
      <Set wrap={BlogLayout}>
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      </Set>
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

Set을 통해 여러 페이지에서 중복되는 Layout 컴포넌트를 재사용할 수 있다.
궁극적으로 Layout 활용을 통해 중복을 최소화하여 재사용성을 개선할 수 있다.

BlogLayout.tsx

import { Link, routes } from '@redwoodjs/router'

type BlogLayoutProps = {
  children?: React.ReactNode
}

const BlogLayout = ({ children }: BlogLayoutProps) => {
  return (
    <>
      <header>
        <h1>
          <Link to={routes.home()}>Redwood Blog</Link>
        </h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.home()}>Home</Link>
            </li>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>{children}</main>
    </>
  )
}

export default BlogLayout

Aboutpage.tsx

import { MetaTags } from '@redwoodjs/web'

const AboutPage = () => {
  return (
    <>
      <MetaTags title="About" description="About page" />

      <p>
        This site was created to demonstrate my mastery of Redwood: Look on my
        works, ye mighty, and despair!
      </p>
    </>
  )
}

export default AboutPage

화면을 약간 정리하였다.