웹프레임워크에서 가장 중요한 개념 중 하나는 Routing입니다.
Routing이 무엇인지 알기 전에 용어부터 정리해봅시다.

용어 정리

Routing이라는 것은 path를 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인가를 결정하는 것을 Routing이라고 부릅니다.

Segment

page.js를 찾아 js의 리턴값을 layout.js에 children으로 결합하여 최종적인 html을 응답하게 됩니다.

create를 클릭하면 path 뒤에는[http://localhost:3000/create](http://localhost:3000/create) 이런 식으로 create가 포함되게 됩니다. 어떤 조치를 취하지 않았기에 404에러가 뜨는 상황입니다.
어떻게 하면 응답하게끔 할 수 있을까?

src/app 에 create라는 폴더를 만들고 약속된 이름인 page.js를 만듭니다. 여기에다가 component를 만들 것 입니다.

export default function Create() {
  return <>Create</>;
}

이렇게 되면 이제 Create버튼을 누를 시에 layout 사이에 Create 라고 뜨게 됩니다.어떻게 작동하는지 알아봅시다.

1. Next.js는 app폴더 내에서 create라는 폴더가 있는 찾게 됩니다. 그리고 그 폴더가 page.js를 갖고 있는지 찾습니다.
2. page.js의 내용을 create가 layout.js를 갖고 있으면 그것과 결합하게 됩니다.
3. 하지만 현재 없기에 그 부모폴더로 가서 layout.js를 찾고 그 컨텐츠가 children에 위치에 들어오고 그 결과를 응답한 것이 웹의 결과와 같습니다.

만약에 create가 layout.js를 갖고 있다면 어떻게 될까요?
create밑에 여러가지 페이지가 있다면, 즉 create가 layout.js를 갖고 있다면 그 전에 일단 create/layout.js를 만들어 봅시다.

export default function Layout(props){
    return (
        <form>
            <h2>Create</h2>
            {props.children}
        </form>
    )
}

• form tag(html) 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는데 사용됩니다. 폼은 입력된 데이터를 한 번에 서버로 전송하고 그 데이터는 웹 서버가 처리하며 결과에 따른 웹 페이지를 보여줍니다. 쉽게 말하면 웹 페이지에서의 입력 양식을 의미합니다. (로그인 창, 회원가입 폼)
  • name: 폼의 이름
  • action: 폼 데이터가 전송되는 백엔드 url
  • method: 폼 전송 방식 (GET / POST)
  • target : action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
  • autocomplete : 자동 완성. on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다.
  • enctype : 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시
  • novalidate : 폼 데이터를 서버로 제출할 때 해당 데이터의 유효성을 검사하지 않음을 명시

이때 props가 꼭 있어야 합니다. props가 사용되는 방식은 경로에 해당되는 페이지를 가지고 오고 싶기 때문에 {props.children} 을 작성하였습니다.

1. 이제 결과를 보기 위해 create버튼을 누르면 page.js가 같은 폴더 내의 layout.js에게 안긴다.
2. 그 부모 폴더 내의 layout.js가 있는지 찾아보고 있다면 지금까지 만들어진 컨텐츠를 부모의 layout.js의 children에 포함시켜 결과를 나타냅니다.

자 이제 조금 더 복잡한 상황을 만들어 봅시다.

html을 클릭하게 되면 경로가 read/1 로 나온 것을 확인할 수 있습니다.
보기에는 큰 문제가 없지만 1번이 골치 아플 수 있는데 그 이유는 어떤 숫자가 올지 알 수 없기 때문입니다. 1이 올 수 있고 1억이 올 수 없습니다. 그래서 다이나믹하게 컨텐츠를 만들어야 합니다.

Dynamic Routing

첫번째 경로가 read이기 때문에 app폴더 밑에 read폴더를 만듭니다.
read 폴더 밑에 1번이라는 segment에 id라는 이름을 부여하고 싶다면
[id] 라는 폴더를 만듭니다. 거기에 page.js를 만들었습니다.

//page.js
export default function Read(props) {
  return (
    <>
      <h2>Read</h2>
			parameters : {props.params.id}
    </>
  );
}

여기서 고려해야할 것이 read 1번 2번과 같이 저 id라고 규정했던 값은 어떻게 컨텐츠로 끌고 올 수 있을까요?

read에 props값을 추가하고 그 내용 안에 {props.params.id} 를 통해 id라는 폴더 명에 위치에 해당하는 컨텐츠인 2를 가져올 수 있습니다.