Next.js
페이지 만들기
React의 복습 차원이다.
결국 js이기 때문에!
- React 문법을 사용해라(JSX)
- 리액트 버전 HTML 특징 4개
- return() 안에 HTML 넣을 때 평행해서 2개 이상 요소를 넣지 못한다.(큰 1개의 <태그>로 시작해서 끝나야 함
- className을 사용해서 CSS 사용하자
- HTML 안에 변수 넣으려면 {}열어서 넣자 ( 데이터 바인딩 문법)
- 내부적으로 style을 넣고 싶을때는
{{color:'red,fontSize:'30px}}처럼 사용(오브젝트 자료형이기 때문에 - 기호를 못쓰기에 -를 삭제하고 뒤에오는 단어를 대문자로 바꿔서 당겨온다)
라우팅(Routing)
url이 바뀔 때마다 페이지가 달라진다.
- Routing
- Next.js는 파일, 폴더 하나 만들면 라우팅 완료
- app폴더 안에 페이지 url로 붙을 폴더를 만들자 ex)list 폴더
- 이후 list 폴더 안에 page.js 를 만들면 자동으로 라우팅 된다.
- /list로 접속시 list폴더 안에 있는 page.js를 보여줌
- 이때 컴포넌트를 하나 만드는 것(page.js)
- a태그와 동일한 역할을 하는
<Link href="..."></Link>태그를 쓰자- 조금 더 부드럽게 페이지 전환을 시켜준다
내가 nav 바를 app에 바로 있는 page 즉 "/" 메인 페이지에 만들었고 다른 페이지에선 나타나지 않는다.
당연한 얘기로 페이지가 달라졌으니 모든 페이지에 nav바를 뜨게 하고 싶으면 각 페이지에도 nav바를 만들면 되긴 한다
하지만 당연히 말도 안된다. 중복 코드를 줄일 수 있으면 줄이는 게 좋기 때문에(페이지가 100개면 100개의 nav바를 만들것인가??)
이런 상단바 처럼 모든 페이지에서 보일 HTML은 layout.js에 작성해주면 좋다.
그리고 만약 /page/page1/page2이런식으로 중첩url을 통해 가고 싶다면..
앞서 했던것처럼 page 폴더를 만든후 page.js를 만들어서 /page 페이지를 만들고 그 page폴더 안에 page1폴더를 만든 후 page.js를 또만든다.
그럴경우 /page/page1 url이 만들어진 것이고 page2를 또 page1에 만들면 page/page1/page2가 완성
동작원리는 무엇일까?
page.js가 있다면 그 페이지를 layout.js가 담아서 보여주는 형식이다
고로 layout.js에 코드를 작성해 놓으면 어떤 페이지를 가더라도 보이게 되는 것이다.
page.js는 layout.js의 return부분에서 {children}에 들어간다
즉
page.js를 보여줄 때
1. 옆에 layout.js가 있으면 그걸로 page.js의 상단(부모) 요소가 된다.
2. 상위 폴더에 layout.js있으면 그걸로 1번 상단(부모)요소가 된다.
쉽게말해
<layout> <!--상위 상위 폴더의 layout.js-->
<layout> <!-- 상위 폴더의 layout.js-->
<layout><!--옆에 있는 layout.js-->
<page/>
</layout>
</layout>
</layout>