NEXT JS - 페이지 추가하기

NEXT JS 프레임워크 페이지 추가하기

작성자

준돌

준돌

kai0915

NEXT JS 페이지 추가 및 공용 Component

기존에 Front-Web에서는 각 페이지를 만들기 위해 HTML 파일을 생성한 뒤, 각 페이지에서 화면을 표현할 CSS 파일 및 Javascript 파일을 호출하여 각 화면을 만들었습니다. 하지만 React JS 및 Vue JS 등 가상돔(Virtual DOM)을 사용하는 라이브러리가 나오면서 우리는 더이상 많은 HTML 파일을 만들어낼 필요가 없습니다. 많은 HTML파을을 생성하지 않는 대신에 우리는 Web Browser에서 HTML 을 화면에 표현하는 과정과 가상 돔 (Virtual DOM)에 대한 개념을 이해해야 합니다.

DOM(The Document Objet Model) 이란?

DOM은 구조화 된 Nodes와 Property, Method를 갖는 Objects로 문서의
구조화된 표현을 제공합니다.(ex: <div>, <span>, <ul> ...)

Web 브라우저에서 HTML을 해석하는 순서

  1. HTML 데이터를 파싱
  2. 파싱한 결과로 DOM Tree 구조를 생성
  3. 파싱 중 CSS 링크를 만나면 Style Roule에 의해 CSS 파일을 요청 받고, CSS 파일을 읽어 CSS Object Model을 생성
  4. DOM Tree와 CSSOM을 이용해 Render Tree를 생성
  5. Render Tree 구조의 각 노드들의 위치를 계산하여 브라우저 화면을 그림

가상 DOM(Virtual DOM) 이해하기

  • 오랫동안 HTML 문서로 표현된 웹페이지에서 어떤 버튼을 클릭하여 상태가 변했을 때, JQuery 또는 Javascript 로 해당 DOM을 수정을 해야 했습니다. 이 수정 작업은 해당 작업자가 해당 HTML 구조의 DOM Tree 또는 CSSOM Tree 구조를 파악하지 못한다고 하면, 정확한 수정이 이뤄지지 않았습니다. 또한, 수정 후 HTML 을 다시 렌더링해야 했습니다. 하지만, 가상돔은 DOM을 직접 수정하지 않고 간소화된 DOM을 버퍼에 보관하여 실제 DOM에 적용하기 전에 바뀐 부분이 있는지 바꿔야 하는 이유가 있는지를 확인하여 수정을 하게 됩니다.(일반적 DOM은 실제로 존재하는 반면, 가상 돔은 메모리에 존체하는 추상적 DOM) 다시 정리하면 가상 돔은 DOM을 렌더링하는 테크닉과 효율적인 알고리즘이 포함된 진화된 DOM의 표현방식이라고 정리할 수 있겠습니다.

  • 가상 돔 이해하기 영상(https://www.youtube.com/watch?v=BYbgopx44vo)


페이지 생성

DOM에 대한 기본적인 개념과 Virtual DOM에 대해 간단히 설명을 드렸으나, 앞으로 Front 작업을 위해서는 반드시 이해하셔야 합니다.

페이지 구성

pages/
├── index.js
└── board.js
  • index.js
import Link from 'next/link'

const Index = () => (
    <div>
        <p>Hello, Next JS 2019haha</p>
        <h2>
            <Link href="/board">
                <a>게시판</a>
            </Link>
        </h2>
    </div>
);

export default Index
  • board.js
const Index = () => (
    <div>
        <h2>게시판</h2>
    </div>
);

export default Index

index.js 에서 사용된 next/link 는?

Link 는 React JS에서 사용되는 페이지 이동 시 사용되는 Wrapper Component 입니다. 기존 HTML 에서 사용한 <a></a> 와 역할을 같지만 동작하는 방법이 다릅니다. <a>태그로 페이지가 렌더링 될 때에는 행 페이지 자체가 리로딩 되지만 <Link>는 해당 페이지의 변경해야 될 부분만을 리로딩 해 줍니다.

Tip 기존에 React JS로 Next JS 프레임웍을 사용하지 않는 곳에서는 <Link to="연결할 페이지..">의 방법을 사요했지만 Next JS에서는 <Link href="이동할 페이지..." 로 사용해야 합니다.

  • 사용법
import Link from 'next/link'

* 단순 링크

...
<Link href="/about">
    <a>소개</a>
</Link>
...
  • 파라미터 전달
<Link href={ pathname: '/about', query: { name: 'Zeit' } }>
      <a>소개</a>
</Link>
  • <Link> </Link> 사이에 <a> 외에 <div><img /> 태그 등으로 사용 할 수 있다.

Options

1) replace: navigation 스택에 해당 경로를 새로 추가하지 않고 현재의 스택에 경로를 재 수정하여 링크 값에 대한 내용을 렌더링 합니다.

2) prefetch: 프리패치된 문서를 방문할 때, 브라우저 캐쉬를 이용해 빠른 페이지 로딩을 할 수 있도록 합니다.

3) passHref: 강제로 Href 링크를 하위 자식 노드에 노출

4) as: <Link as={page/${page.id}} href="이동할 페이지"> 브라우저 주소창에 보여질 이름을 alias 를 정해 사용 할 수 있다.

공용 Component 생성

모든 페이지에 들어가는 부분이 있습니다. 화면을 기획하기 나름이지만 보통 상단에 메뉴 및 로그인 버튼, 그리고 하단에 사이트에 대한 정보 등이 있습니다. 이를 모든 페이지마다 추가하지 않고 Template 으로 만들어서 공용으로 사용할 수 있는 방법을 정리 해 보겠습니다.

상위 디렉토리에 Components 디렉토리 생성

꼭 Components 로 할 필요는 없습니다. '/src/components' 로 해도 됩니다. 앞서 생성한 디렉토리인 /pages만 지켜주시면 됩니다.

  • /components/Header.js 생성
import Link from 'next/link';

const linkStyle = {
    marginRight: '1rem'
};

const Header = () => {
    return (
        <div>
            <Link href="/"><a style={linkStyle}>홈</a></Link>
            <Link href="/board"><a style={linkStyle}>게시판</a></Link>
        </div>
    );
};

export default Header;
  • /components/Footer.js 생성
const footerStyle = {
    backgroundColor: 'black',
    color: '#fff'
};

const Footer = () => {
    return (
        <div style={footerStyle}>
            Footer 영역
        </div>
    );
};

export default Footer;
  • Header.jsFooter.js를 공용으로 한 /components/Layout.js 생성
import Header from './Header';
import Footer from './Footer';

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

export default Layout;
  • /pages/index.js 수정
import Layout from '../components/Layout';

const Index = () => (
    <Layout>
        <p>Hello, Next JS</p>
        <h2>
            홈 화면
        </h2>
    </Layout>
);

export default Index
  • /pages/board.js 수정
import Layout from '../components/Layout';
const Index = () => (
    <Layout>
        <h2>게시판</h2>
    </Layout>
);

export default Index
  • 디렉토리 구조
├── .next             # 빌드 파일. next.config.js 파일 내에서 경로 지정 가능!
├── components        # React 컴포넌트 저장 디렉토리
│   ├── Header.js
│   ├── Footer.js
│   └── Layout.js
├── node_modules
├── pages             # 실질적으로 보여지는 페이지. 언더바(_)가 붙은 파일을 제외하고, 각각의 파일이 하나의 경로(route에 매핑되는 페이지)
│   ├── board.js     # '/board' 경로에 해당하는 페이지.
│   └── index.js      # '/' 경로에 해당하는 페이지.
├── package.json

정리

  1. Next JS 프로젝트 디렉터리에 pages 디렉터리 생성
  2. 추가할 페이지를 .js 파일로 생성(기본 라우팅 되는 페이지는 index.js)
  3. 페이지에서 페이지로 이동 시 next/link Component 추가
  4. 링크 할 Dom을 <Link href="이동할 페이지"> 로 감싼다.
  5. 공통으로 들어갈 템플릿 형태의 Component를 작성하여 Tag 처럼 Wrapper 형태로 사용한다.

Tags : javascript react nextjs 

comments powered by Disqus