React의 가변 페이지 레이아웃

지난 주에 나는 React 웹사이트에 대한 일정한 Header-Content-Footer 형식을 얻는 방법을 설명했습니다. 그러나 이제 거의 항상 일정한 헤더를 원하지만 항상 그런 것은 아니라고 가정합니다. 또는 사이드바와 같은 추가 구성요소가 사이트의 일부에 포함되기를 원합니다. 지난 주에 살펴본 솔루션은 유연성이 없기 때문에 이러한 시나리오에서는 제대로 작동하지 않습니다. 걱정하지 마십시오. 여전히 동일한 개념을 사용할 수 있지만 추가적인 유연성을 제공하려면 레이아웃이라는 다른 구성 요소로 추출해야 합니다.

배치

가장 단순한 형태로, index.js에서 머리글과 바닥글을 가져와서 대신 새 파일인 Layout.js에 추가하는 것뿐입니다.

// Layout.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';

  const Layout = props => {
    return (
      <div>
        <Header/>
          {props.children}
        <Footer/>
      </div>
    );
  }

  export default Layout;

그런 다음 라우터가 렌더링하는 구성 요소에서 Layout 구성 요소 내부의 return 문에 모든 것을 래핑합니다.

// Main.js
import React, {Component} from 'react';
import Layout from './Layout';

export default class Main extends Component {
  render() {
    return (
      <Layout>
        <div className="Main">
          <h2>Hi There! I'm Dan Hintz and I'm a full-stack web developer.</h2>
        </div>
      </Layout>
    )
  }
}

이로 인해 Layout.js의 {props.children} 라인은 Main Component에 의해 렌더링된 모든 것을 그 자리에 표시하게 되며, 이는 우리를 지난주와 정확히 동일한 위치로 안내합니다. 하지만 모든 라우터에 표시되는 Layout 구성 요소에 해당 Layout 구성 요소를 추가해야 합니다. 요소.

그래서 무엇을 제공합니까? 지루하게 들리는데 왜 그렇게 하고 싶습니까? 음, 약간의 추가 작업으로 각 구성 요소에서 소품을 전달하고 필요에 따라 레이아웃을 사용자 정의하는 데 사용할 수 있도록 설정할 수 있습니다. 예를 들어 블로그를 제외한 모든 페이지에 헤더가 표시되기를 원한다고 가정해 보겠습니다. 어떻게 할까요?

먼저 각 구성 요소에서 레이아웃으로 소품을 전달해야 합니다. 우리는 prop을 'displayHeader'라고 부를 것입니다. Main.js의 위 코드에서 <Layout>를 <Layout displayHeader={true}>로 변경하여 prop을 전달하면 됩니다. 우리는 About.js에 대해서도 그렇게 해야 합니다. Blog.js의 경우 그러나 이 페이지에 헤더가 표시되는 것을 원하지 않으므로 <Layout displayHeader={false}>로 변경해야 합니다.

다음으로 전달된 데이터를 사용하기 위해 Layout.js로 이동합니다. 여기서 우리가 하려고 하는 것은 express: "displayHeader prop가 true이면 헤더를 표시하고, 그렇지 않으면 아무 것도 표시하지 마십시오"이므로 간단한 if 문만 있으면 됩니다. 불행히도 React에서 JSX를 사용하기 때문에 "if"가 작동하지 않습니다. 대신 이 형식을 사용합니다(&&는 다음과 같은 경우 인라인을 나타냅니다.

{argument &&
  <RenderedComponent/>
}

이제 레이아웃 구성 요소는 다음과 같습니다.

const Layout = props => {
    return (
      <div>
        {/* Remember: && is an inline if statement */}
        {props.displayHeader &&
          <Header/>
        }
          {props.children}
          {/* anything else you want on the Layout */}
        <Footer/>
      </div>
    );
  }

export default Layout;

이를 통해 Blog를 제외한 모든 구성 요소에 대해 displayHeader=true를 전달하므로 이제 Blog 페이지를 제외한 모든 페이지에 대한 헤더를 표시하는 사이트가 생깁니다. 얼마나 멋진가요? 이 가상의 경우 NavLink는 헤더의 일부로 위치하므로 블로그 페이지에서 사라집니다.