게이츠비 2번 - 우리가 페이지로 할 수 있는 기본적이고 똑똑한 일을 알아보자.

지난번에 우리는 게이츠비를 위해 첫 페이지를 만들었다.이제 실제 사이트를 구축할 때 흔히 볼 수 있는 일을 보여 드리겠습니다.
이 일련의 블로그 글에 대해 저는 가설적인 식당 사이트에서 일하고 있습니다. 이 사이트에는 다음과 같은 페이지가 있습니다.
주택
식품

음료수

팀

색인 페이지가 이미 설정되어 있으므로 이러한 페이지의 기본 버전을 작성하기 위해 몇 개의 단어를 복사하고 붙여 넣을 수 있습니다.

//Food.js

import React from 'react';

function FoodPage() {
  return (
    <div>
      <p>This is the Food page</p>
    </div>
  );
}

export default FoodPage;

나머지는 어떻게 될지 알아줬으면 좋겠어.

탐색 - 첫 번째 구성 요소
나는 네가 이미 인터넷을 충분히 사용한 시간이 되었다고 생각한다. 너는 우리의 응용 프로그램에서 내비게이션 표시줄이 우리가 페이지 사이를 돌릴 수 있도록 하는 것이 좋은 생각이라는 것을 알게 될 것이다.모든 페이지에서 사용하는 하나의 구성 요소로 추상화하면 대량의 코드와 번거로움을 절약할 수 있습니다.그럼 우리 이렇게 하자.
components 폴더는 웹 페이지에서 다시 사용할 수 있는 작은 위젯을 만드는 곳입니다.여기서 다음과 같은 탐색 구성 요소를 생성할 수 있습니다.

//Nav.js
import React from 'react';

function Nav() {
  return (
    <nav>
      <ul>
        <li> Food</li> //Not a link yet... 
        <li> Drinks</li>
        <li> Team</li>
      </ul>
    </nav>
  );
}

export default Nav;

다음과 같이 페이지에 추가해야 합니다.

import React from 'react';
import Nav 
function FoodPage() {
  return (
    <div>
      <p>This is the Food page</p>
    </div>
  );
}

export default FoodPage;

이렇게 하면 Nav 구성 요소가 페이지에 들어오지만 실제로 링크가 없습니다.

링크 태그
현재, 당신은 <a> 표시를 사용할 수 있지만, 이것은 페이지를 새로 고칠 수 있습니다. 이것은 매우 게이츠비(즉 게이츠비를 이용하여 우리를 위해 할 수 있는 것이 아니라는 뜻)가 아닙니다. 따라서 게이츠비 링크 표시를 사용하도록 하겠습니다.

import React from 'react';
import { Link } from 'gatsby';

export default function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/food">Food</Link>
        </li>
        <li>
          <Link to="/drink">Drink</Link>
        </li>
        <li>
          <Link to="/team">Team</Link>
        </li>
      </ul>
    </nav>
  );
}

네가 한번 테스트해 보면 속도가 매우 빠르다.

탐색 기능
단, 프로그래밍 방식으로 페이지를 변경할 수도 있습니다.다시 말하면 사용자가 눌렀을 때 답장을 하지 않습니까?예를 들면 테이블입니다.우리는 게이츠비의 내비게이션 기능이 필요하다.

import { navigate } from gatsby
//at some point in the code... 
navigate('/newpage', {replace: true})

{replace:true} 옵션을 사용하면 새 페이지를 히스토리에 추가하여 뒤로 버튼을 사용할 수 있습니다.

배치
대부분의 웹 페이지는 눈썹, 꼬리, 네비게이션, 그리고 모든 페이지에 나타나는 많은 것들이 있다.우리는 모든 페이지에 내비게이션 구성 요소를 추가했다. 이것은 사람을 화나게 할 것이다. 특히 우리가 곳곳에 다른 구성 요소가 많이 필요할 때, 이것이 바로 레이아웃의 용무이다.
이것은 우리가 일반적으로 눈썹을 내용 앞에 놓고, 꼬리를 내용 뒤에 놓는 것처럼 간단하지 않다. 모든 내용을 하나의 레이아웃 구성 요소에 넣고, 그것을 '하루' 라고 명명하기만 하면 된다.
쉽게 모든 구성 요소는 하위 구성 요소를 인용하는 도구를 포함하고 포함된 구성 요소를 렌더링할 수 있습니다.따라서 레이아웃 어셈블리를 생성한 후에는 레이아웃의 다른 요소 간에 서브어셈블리를 렌더링할 수 있도록 props.children을 추가할 수 있습니다.

export default function Layout(props){
  return (
    <div>
      <Header />
      {props.children}
      <Footer />
  )
}

분명히 레이아웃의 내용을 변경할 수 있습니다. 레이아웃 구성 요소를 모든 페이지에 추가하기만 하면 됩니다.하지만 게이츠는 확실히 우리에게 더 똑똑한 방법을 주었다...
루트 위치에 gatsby-browser.js이라는 파일을 만들어야 합니다.이 파일은 브라우저를 위해 몇 개의 API를 사용할 수 있도록 합니다.이러한 API는 here에서 찾을 수 있습니다.우리가 여기서 원하는 것은'wrapPage Element'이다. 게이츠비 사이트에 따르면

Allow a plugin to wrap the page element.
This is useful for setting wrapper components around pages that won’t get unmounted >on page changes. For setting Provider components, use wrapRootElement.

따라서 제시된 설명에 따라 우리는 다음과 같은 결론을 얻을 것이다.
React에서 React 가져오기;
함수 wrapPageElement 내보내기({element, props}) {
{element} 반환;
}
보시다시피 이것은 레이아웃과 매우 비슷합니다. 그 중에서 도구는 페이지에 포함된 도구이고, 요소는 게이츠비의 페이지 자체입니다.
중요한 정보: 이 문서를 작성할 때, 이 파일들을 수정할 때 서버를 다시 시작해야 합니다. 나처럼 실행 중인 서버의 터미널을 잃어버리는 경향이 있다면, 여기 [유용한 기술 () 이 있습니다.
일단 당신이 그 일을 하게 되면, 레이아웃 구성 요소는 모든 페이지에 불러올 것입니다. 아무것도 하지 않습니다.내비게이션/레이아웃에 대한 오래된 인용을 지워야 할 수도 있습니다. 그렇지 않으면 두 번의 레이아웃을 볼 수 있습니다.
마지막으로 이것은 브라우저에 적용되지만 서버 측의 내용에 대해 우리는 같은 위치의 gatsby-ssr.js이라는 파일에서 같은 조작을 실행하기를 희망한다.gatsy-browser.js 파일을 복사하고 이름을 바꿀 수 있습니다.SSR에 대한 자세한 내용은 나중에 확인하십시오.
위와 같은 모든 방법을 따르면 스마트한 페이지가 있고 레이아웃도 스마트하길 바랍니다!
자, 이제 새로운 프로그램을 구축하는 문제는 흑백과 기본 글꼴이 단조로워 보이기 때문에 다음 글에서 CSS를 게이츠와 함께 사용하도록 하겠습니다.