후.. 이게 대체 뭔데~

근데 계속 찾아보다가 생활 코딩이라는 유튜버의 영상을 봤는데도 이해가 안가서 계속 반복해서 봤다.. 계속 보다보니 이해가 되나? 싶은 느낌이 오긴한다..

예를 들어 NewProject/src/app/ 경로에

layout.js

위 생략..

export default function RootLayout({

children}) {

return(

<html>

<body>

<h1><a href="/">WEB</a></h1>

{children}

<ul>

<li><a href="/create">Create</a></li>

</ul>

<ol>

<li><a href="/read/1">html</a></li>

<li><a href="/read/2">css</a></li>

</ol>

</body>

</html>

)

}

page.js

export default function Home() {

return(

<>

<h2>Hellow Next.js !! </h2>

Hellow Web!

</>

)

}

이런 rootlayout 과 page.js가 있다.

※여기서 <a> 태그로 경로가 저장되어있는 곳들은 전부 현재 return 되는 값들이 없기 때문에 404 error가 나온다.

주소창에 http://localhost:(port) 로 접속을 하게 되면 / 경로로 들어갑니다. 여기서 / 경로는 NewProject/src/app/ 이쪽인데, 여기서 next.js 는 page.js 를 찾게 됩니다.
page.js가 존재한다면 page.js 의 return 값이 layout.js 의 {children} 과 결합하게 됩니다. 그냥 쉽게 page.js 의 return 값이 layout.js 의 {children} 으로 들어간다.

그럼 첫번째로 create 링크를 눌렀을 때 연결되도록 해보자
먼저 NewProject/src/app/ 경로 밑에 create 폴더를 하나 만들어 주자.
현재 경로 NewProject/src/app/create/ 이 경로 안에서 또 다시 page.js 를 만들어주자.

NewProject/src/app/create/page.js

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

그럼 이제 / 경로에서 <a> 태그인 create를 눌러보자.
위에 주소창이 http://localhost:(port)/create 로 들어와진 것을 볼 수 있다.
그러면서 create 폴더안에 page.js 가 있는지 확인하고 layout.js 가 있는지 확인한다.
NewProject/src/app/create/layout.js 가 없다면 부모 폴더로 가서 layout.js 를 찾는다.

NewProject/src/app/create/layout.js

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

여기서 props 가 꼭 있어야한다. 아직 props 가 뭔지 잘 모르겟지만 그냥 최상위 경로 밑에 있는 경로에서는 저 매개변수? 를 넣어줘야하는 것 같다.. page.js 와 결합을 하려면? ㅎㅎ.. 아 몰라~~ 좀 더 봐야할듯 ..


다음 블로그는 다이나믹 라우팅에 대해서 올려볼게유~