헤더 컴포넌트가 언제나 페이지 상단에 떠 있도록 position 값을 fixed로 설정했습니다. 그런데 position을 fixed로 설정하면 헤더 컴포넌트 하단에 나오는 콘텐츠가 헤더의 위치와 겹치게 됩니다. 그러므로 Spacer라는 컴포넌트를 만들어서 헤더 크기만큼 공간을 차지하도록 했습니다.

이제 이 컴포넌트를 PostListPage에서 렌더링해 보세요.

pages/PostListPage.js

import React from 'react';
import Header from '../components/common/Header';

const PostListPage = () => {
  return (
    <>
      <Header />
      <div>안녕하세요.</div>
    </>
  );
};

export default PostListPage;

---

 

다음과 같은 결과가 나타났나요?

▲ 그림 24-29 Header 컴포넌트

 

여기서 로그인 버튼을 누르면 /login 페이지로 이동해야 하는데요. 버튼 컴포넌트를 Link처럼 작동시키는 두 가지 방법이 있습니다.