1. 페이지 이동

페이지 이동

Next js는 app폴더 내 폴더를 만들면 자동으로 경로를 지정해 줍니다.
app폴더에 show라는 폴더를 만들어서 /show로 접속 시 보여줄 페이지를 만들어봅시다.

폴더 구조

여기서 잠깐, jsx 파일과 js 파일의 차이점은 무엇일까요?

jsx는 JavaScript XML의 약자로, JavaScript를 확장한 문법입니다. 가장 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는 점입니다.
js파일로 사용해도 문제는 없습니다만, jsx 파일로 사용하는 이유는 Emmet 기능을 사용할 수 있기 때문입니다.

다시 본론으로 돌아와서 show 폴더 내부의 page.jsx 파일에 다음과 같은 코드를 작성해 줍니다.

export default function Show() {
  return (<div>Show 페이지 입니다.</div>);
}

 

위 코드를 간단하게 설명하자면,

export default function Show(){}는 Show라는 이름의 함수를 만들어서 외부로 보내준다고 이해하시면 됩니다.
return() 내부에 있는 HTML들이 실제 페이지에 보여줄 요소입니다.

결과 화면

 

/show 경로로 접속해 보면 위와 같은 화면이 나옵니다. return() 내부의 HTML이 제대로 표시되어 있습니다.

지금은 일일이 주소를 입력해서 이동해야 합니다.
메인 페이지에서 /show로 이동할 수 있는 수단을 만들어 봅시다.

 

 

<Link>

next js에서 경로 이동을 위해 <Link> 태그를 이용할 수 있습니다.
HTML의 <a> 태그와 유사한 기능입니다.

공식 문서

<Link>를 사용하기 위해서는 먼저 import 후 사용해야 합니다.

export default function Home() {
  return (
    <div>
      <div>안녕하세요</div>
      <Link href="/show">Show 페이지로 이동하기</Link>
    </div>
  );
}

 

<Link>는 필수적으로 href가 들어가야 합니다. href에는 이동할 경로를 적어주면 됩니다.

 

아래는 결과 화면입니다.

결과 화면

이제 show 페이지로 이동하기를 누르면 /show 경로로 이동합니다.

 

다음 편부터는 본격적으로 TO DO사이트 만들기에 들어갑니다.
tailwindcss로 꾸미기를 해볼 예정입니다.

시도해 보기)

다른 페이지도 더 만들어서 추가해 봅시다.

TO DO 사이트는 글을 작성하는 페이지와, 글의 목록을 보여주는 페이지가 필요합니다.
각각 wirte 페이지와, list 페이지로 추가해 봅시다.