[NextJS찍먹] 스트리밍 사이트 만들기 - 2. header 추가 (Component 생서, styled-components, 정적 라우팅)

보통 유튜브 어느 페이지든 상관없이 항상 위쪽에 달려있는 것이 있다.

보통 그러한 유형의 UI를 Header라고 부른다. 명색의 스트리밍 사이트니까 우리도 추가해주자

[그림1] 유튜브 header

---

styled-components

이전 강좌에서 기본 styling 을 위한 디렉토리를 삭제했는데, 그 이유는 styled-components를 사용할 것이기 때문이다.

styled-copmonents는 javascript 라이브러리로 CSS-in-JS를 위한 라이브러리다. 별도의 css 파일을 작성하지 않고,

component 파일에 함께 작성 할 수 있기 때문에 파일이 많아졌을때 일일이 어떤 style인지 확인해야할 

수고를 덜어줄 수 있다.

대신 CSS때문에 파일 길이가 증가한다. 때문에 컴포넌트의 경계를 잘 설정하여 한 컴포넌트가

너무 비대해지지 않게 주의해야 한다.

설치는 간편하게 프로젝트 디렉토리에서 "yarn add styled-components"으로 모듈을 추가하면 된다.

---

컴포넌트 추가하기

react에서 컴포넌트 추가하는것과 동일하다 (애초에 react 위에서 돌아가니..) class 형보다는 짧게 작성 가능한

함수형 컴포넌트가 요새 트렌드 이기때문에 여기서도 그렇게 한다.

import styled from "styled-components";

const TopPanel = styled.div`
  display: flex;
  top: 0px;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: #ffffff;
`;

const TopLogo = styled.div`
  height: 100%;
  width: 300px;
  background: url("/static/images/logo.png") no-repeat;
  background-size: 90% 70%;
  background-position: 10% 30%;
  box-sizing: border-box;
`;

const TopRightPanel = styled.div`
  height: 100%;
  margin: 10px;
`;

const Header = () => {
  return (
    <TopPanel>
      <TopLogo />
      <TopRightPanel></TopRightPanel>
    </TopPanel>
  );
};

export default Header;

애초에 전문 프론트엔드 개발자도 아니고 div로 퉁쳐서 만들었다.

styled-components의 사용법은 보다시피 간단하다!

1. 컴포넌트의 태그로 들어갈 이름을 변수명으로 한다.

2. styled.태그 뒤에 백틱( ` ) 으로 감싸고 그 안에 css style을 명시한다.

 

이렇게 하고 header 이기 때문에 _app.jsx 컴포넌트에다가 넣어준다.

import Header from "../components/Header";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Header></Header>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

이제 모든 페이지는 header가 출력된다.

[그림2] index 페이지 모습

---

정적 라우팅

유튜브를 보면 로고 부분 클릭시 home( index ) 페이지로 이동한다. Next JS에서는 요러한 정적 페이지로 이동하는 것을

<Link> 태그를 이용하여 구현 할 수 있다.

import styled from "styled-components";
import Link from "next/link";

//...

const Header = () => {
  return (
    <TopPanel>
      <Link href="/">
        <TopLogo />
      </Link>
      <TopRightPanel></TopRightPanel>
    </TopPanel>
  );
};

export default Header;

위 코드처럼 Logo를 Link태그로 감싸면 자동으로 클릭을 바인딩하여 href="" 페이지로 이동시켜준다.

(그냥 / (index) 페이지로 해두면 이동 안하는 것처럼 보일 수 있으니 확인하고 싶으면 없는 페이지라도

써보면 확인 가능하다!)

로고 위로 올라오면 커서 모양도 바뀌게 css나 <a>태그로 적당히 묶어주자!

[영상1] 정적 라우팅 적용