목차
· 모든 페이지는 _App 파일을 통한다.
· 라우트 설정과 다이나믹 라우트
· 글로벌 CSS
· _Document
· PreFetching
해당 글은 계속해서 작성 중입니다 👏🏻
모든 페이지는 _App 파일을 통한다.
· _App 컴포넌트에서 렌더링 하는 값은 모든 페이지에 영향을 준다.
· 최초로 실행되는 컴포넌트는 _app.tsx이다. (타입 스크립트 사용 시 tsx, 아닐 경우 jsx)
· _app.tsx는 클라이언트에서 띄우길 바라는 전체 컴포넌트이며, 공통 레이아웃임으로 최초 실행되며 내부에 컴포넌트들을 실행한다.
· 내부에 컴포넌트가 있다면 전부 실행하고 html의 body를 구성
· Component와 pageProps를 받는다.
1. Component props는 요청한 페이지를 의미, GET `/` 요청을 보냈다면, Component에는 /pages/index.tsx 파일이 props 파일이 rpops로 내려오게 된다.
2. pageProps는 페이지 getInitialProps를 통해 내려 받은 props들을 말한다.
3. 그 다음 _document.tsx가 실행된다.
· 페이지를 업데이트 하기 전에 원하는 방식으로 페이지를 업데이트 하는 통로 같은 존재이다.
· _app.tsx에서 console.log 실행 시, client와 server 둘 다 콘솔에 찍힌다. (localhost:3000 웹과 터미널에서 둘 다 콘솔로 보임)
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;위의 _App 컴포넌트에서 넘어온 Component는 현재 페이지를 의미하며, pageProps는 데이터 페칭 메서드를 통해 미리 가져온 초기 객체를 의미한다. 이 메서드를 사용하지 않는다면 빈 객체가 전달된다.
React 프레임워크이기 때문에 페이지 전환시 레이아웃을 유지할 수 있고, 상태 값을 유지할 수 있다.
그리고 추가적인 데이터를 페이지로 주입시켜주는게 가능하다.
라우트 설정과 다이나믹 라우트
SPA에서 제공하는 Link 태그의 사용법도 다르다.
React의 경우 점프 페이지로 이용할 주소를 `to`로 지정하지만, Next의 경우 `href`를 통해 지정을 해준다.
a 태그를 사용하면 처음 페이지에 진입시 번들 파일을 받고, a 태그에 의해 라우팅되면 다시 번들 파일을 받기 때문에 Redux를 사용할 경우 stor의 state 값이 증발되는 현상이 일어난다. 그렇기 때문에 a 태그는 전혀 다른 사이트로 페이지를 이동시켜 다시 돌아오지 않는 경우만 사용하고, 그 이에외는 모두 Link 태그를 사용하는 것이 바람직하다.
React에서의 App 파일에서는 일반적으로 react-router-dom을 통해 아래와 같은 라우팅 지정을 해주었다. 하지만, Next.js에서는 이를 따로 설정해 줄 필요없이 자동으로 라우팅 지정을 해준다.
<Routes>
<Route>
<Link to={점프 페이지로 이용할 주소} element={이동할 컴포넌트} />
</Route>
</Routes>
Next.js는 가변적으로 변하는 url에 대해 동적 url을 지원한다. 컴포넌트를 [] 감싸면 동적 페이지를 만들 수 있다.
// pages/[id].tsx
import { useRouter } from "next/router";
export default () => {
const router = useRouter();
return (
<>
<h1>post</h1>
<p>postid: {router.query.id}</p>
</>
);
};React의 경우 useHistory와 react-router-dom에서의 쿼리를 따로 설정을 해줘야했지만, Next.js는 [] 문법을 사용만 해주면 `router.query.값` 과 같이 쿼리 값을 보다 편리하게 제공을 해준다.
글로벌 CSS를 이곳에 선언한다.
마찬가지로 React에서 Emotion.js 스타일 라이브러리를 react-route-dom에서 지정한 라우트 요소의 최상위로 올림으로서 글로벌 스타일을 사용했었는데, Next.js에서의 _App 파일도 동일하게 사용을 할 수 있다. 즉, 공통적인 모든 페이지에 들어갈 내용을 작업할 수 있다는 이야기다.
_Document 파일
_document 파일은 서버에서만 렌더링되고, onClick과 같은 이벤트 핸들링이 작동되지 않는다. CSS도 적용되지 않는다. Next.js 페이지들은 마크업 정의(html, head, body 태그와 같은)를 건너뛰기 때문에 html, head, body와 같은 태그를 만들어야할 때는 document 파일을 필수적으로 생성해야한다. document 파일이 있어야 마크업 부분을 수정 및 커스텀 할 수가 있다. (정말 static 한 상황에서만 사용)
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class CustomDocument extends Document {
render() {
return (
<Html>
<Head>
// 모든페이지에 아래 메타테크가 head에 들어감 // 루트파일이기에 가능한
적은 코드만 넣어야함 전역 파일을 엉망으로 만들면 안된다 // 웹 타이틀,
ga 같은것 넣음
<meta property="custom" content="123123" />
</Head>
<body>
<Main />
</body>
<NextScript />
</Html>
);
}
}head 태그 안에 들어가는 title의 경우, 커스텀 태그를 통해 _App 컴포넌트 안에서 선언해주는게 좋다.
PreFetching
백그라운드에서 페이지를 미리 가져오는 방법이다. 기본 값은 true로, <Link /> 뷰 포트에 있는 모든 항목(초기 또는 스크롤을 통해)이 미리 로드 된다. 정적 생성을 하는 JSON 페이지는 더 빠른 페이지 전환을 위해 데이터가 포함된 파일을 미리 로드한다.
이 부분은 Link 컴포넌트를 사용해서 이뤄지는데, 링크 컴포넌트를 렌더링할 때 <Link prefetch href="..."> 형식으로 prefetch 값을 전달해주면 데이터를 먼저 불러온 다음에 라우팅을 시작한다. 이는, 프로덕션 레벨에서만 이뤄진다.
레퍼런스
next.js 기본 개념 알아보기
next.js 기본 개념 알아보기, react, seo, ssr
kyounghwan01.github.io
'개발적인' 카테고리의 다른 글
| 경험의 미학 (0) | 2023.03.09 |
|---|---|
| 리덕스(Redux) 미들웨어 (0) | 2023.03.08 |
| [에러일지] React The href attribute requires a valid value to be accessible. (0) | 2023.03.01 |
| [에러일지] ESLint - Function component is not a function declaration (0) | 2023.03.01 |
| 토스 채용 서비스인 줄 알았는데,, (0) | 2023.02.24 |
댓글