다시 쓰는 React Next.js #1

YEZI🎐·2023년 3월 25일

React hydration next.js pre-rendering router

React

목록 보기

30/46

아 Next.js 뭐더라~ 분명히 썼었는데~
다시 쓴다~

라이브러리? 프레임워크?

쉽게 풀어 말하면

라이브러리(Library) :
단순 활용가능한 도구들의 집합 같은 느낌
내가 사용하고 싶을때 사용하고 사용하고 싶은거 사용하면 된다.
프레임워크(Framework) :
프레임워크가 정한 규칙대로 사용해야한다
프레임워크의 규칙대로 맞게 잘 작성한다면 알아서 내 코드를 불러 실행한다.

React는 라이브러리인데, Nextjs는 React 프레임워크다. 신기
여튼 그래서 Next.js의 룰을 사용해야한다.

설치

# with npm
npx create-next-app@latest

Next.js

page 폴더에 index.js를 생성하여 컴포넌트를 export default 시키면 자동으로 홈 화면이 된다.
왜? 프레임워크니까~ 이런게 자동으로 세팅이 되어있는 거다.
그렇기 때문에 프레임워크 사용자는 그 규칙을 따라야 하는 거고

index.js : 자동으로 홈 화면
login.js
- /login : 파일명이 자동으로 경로가 되어 라우팅 처리가 된다
- 이때, 컴포넌트의 이름은 상관 없다.
  유저에게 보여줄 페이지라면 export default만 하면 된다.

Next.js 장점

React Router 라이브러리를 사용하지 않아도 자동으로 라우터 사용 가능
.jsx자가 아닌 js에서도 react를 import 하지 않아도 jsx를 쓸수 있음
Pre-rendering을 제공하여 각 페이지에 대해 미리 HTML을 생성
그렇기 때문에 Pre-rendering을 하면 SEO 가능
(DOM을 보면 jsx html 코드가 페이지 소스 보기에 나와있는걸 볼 수 있음)
- hydration : Pre-rendering 됐던 것들이 Reactjs로딩 후 Pre-render되었던 것들과 연결되어서 일반적인 React가 되는 것(페이지와 유저가 상호작용)
404 페이지가 기본적으로 있어 없는 경로로 들어왔을 경우의 처리를 따로 세팅하지 않아도 됨

Navigate

<a>를 이용해 페이지를 이동을 하면 페이지가 리로드 된다.
그럼 React에서 SPA(Single-page application)의 장점이 사라지기 때문에 React Router의 Link를 사용했어야 했다.
같은 이유로 Next.js에서도 <a>를 이용하지 않고 페이지 네비게이트 시, Link 컴포넌트를 사용한다.

import Link from 'next/link';

<Link href="/">home</Link>

현 url에 따라 class or css 적용하기

import { useRouter } from 'next/router';

const router = useRouter();

<Link href="/" style={{ color: router.pathname === '/' ? 'red' : 'blue' }}>
 home
</Link>

style jsx

Next.js에서는 CSS-Module을 사용하거나 style jsx를 사용한다.

<style jsx>
  {`
    a{color: coarl}
  `}
</style>

스타일의 적용 범위를 오직 해당 컴포넌트 내부로 한정한다.
자식 컴포넌트 까지 영향을 주고 싶으면 global 속성 추가
```
<style jsx global>{``}</style>
```

중첩(Nested) 라우팅

React에서의 중첩 라우팅을 하고 싶다면 page 폴더에 _app.js를 만들어 추가하면 된다.
그럼 page 폴더 내에 있는 모든 js를 랜더링 하기 전 _app.js를 랜더링 하게 되어 중접 라우팅을 할 수 있다.

_app.js의 컴포넌트는 Component, pageProps 두개의 Prop을 갖는다.
- Component : url에 맞는 컴포넌트
- pageProps : getServerSideProps에서 return한 pageProps
파일명.module.css 파일 형태를 제외한 모든 나머지 css파일들은 _app.js에서만 import해와서 사용해야 한다.
(글로벌 css간의 충돌을 피하기 위해)

import '@/styles/globals.css';

export default function App({Component, pageProps}) {
  return
  <>
    <Component {...pageProps} />
    <style jsx global>
    {`
      a {
        color: darkseagreen;
        text-decoration: none;
      }
    `}
    </style>
  </>;
  
}