.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
App Routing
•
기본적으로 앱 라우터 내부의 모든 페이지와 레이아웃은 기본적으로 React 서버 구성 요소이다.
•
이건 코드가 서버에서만 실행됨을 의미한다.
•
따라서 응용 프로그램에 있는 모든 새로운 추가 구성 요소에 대해 추가 JS를 클라이언트로 보내지 않고 서버측에서만 안전하게 실행된다.
•
클라이언트 측에 더 많은 코드를 도입하려는 경우에는 상호작용을 위한 클라이언트 구성 요소를 갖게 된다.
•
앱 디렉토리의 이 페이지에서 정의한 인덱스 경로가 있지만 새 경로를 만들려면 새 폴더를 만들고 호출해야한다. 이건 정적 경로 이상을 지원한다.
•
NextJS에서 Routing은 App폴더 안에서 진행된다. App폴더 안에서 폴더가 만들어지면 그 폴더의 이름으로 url이 생성된다.
•
예를 들어 about이라는 폴더가 생성된다면 page.tsx라는 이름을 가진 파일의 소스코드를 불러와 페이지를 생성하게 된다.
•
동적 경로 세그먼트도 존재할 수 있다.
•
위와 같이 blog 폴더에 추가로 [id]폴더를 만든 후 해당 폴더에서 새 페이지.tsx를 정의한다면 실제 blog/123과 같이 구성 요소의 props 내부에 있는 params 키에 액세스하여 매우 쉽게 수행할 수 있다.
•
이 경우 해당 객체를 분리하고 Param 키를 꺼낸 다음 tsx 내부의 params.id를 사용하여 이 경로의 세그먼트의 ID를 렌더링할 수 있다.
Data Fetching
•
인덱스 경로 내에세 일부 데이터를 가져올 수 있는 방법
1.
페이지 디렉터리에서 getStaticProps 잋 GetServerSide Props와 같은 NextJS 특정 API
2.
구성 요소를 비동기 구성 요소로 표기
3.
이 인스턴스에서 const response equals await를 수행 가정할 때
•
해당 응답을 받았을 때 JSON을 가져온 후 jsx 내부에서 실제 해당 데이터 사용 가능
•
tsx로 바꿨을 때
Redirection
•
NavBar.tsx
'use client' // App Router에서 navigation을 쓰기 위한 사전 단계
import Link from "next/link";
import styles from './NavBar.module.css';
import {usePathname} from 'next/navigation' // navigation의 Pathname을 불러오기
export default function NavBar() {
const pathname = usePathname() // pathname
return (
<nav>
{/* className에서 2가지 방법으로 특정 문자열 삽입 방법 */}
<Link href="/" className={`${styles.link} ${pathname === '/' ? styles.active : ""}`}>
{/* 백틱을 이용 */}
Home
</Link>
<Link href="/about" className={
[pathname === '/about' ? styles.active : ""].join(" ")}
>
{/* 클래스 이름들의 배열 삽입 후 join */}
About
</Link>
</nav>
)
}
TypeScript
복사
주석
•
JS주석
// 이것이 JS주석
TypeScript
복사
•
JSX주석
<h1> hello {/* 이것은 JSX주석 */} </h1>
TypeScript
복사
