Next.js 기초

✅ 라우팅

• 기본적으로는 src/app 디렉토리 내부의 page.tsx를 layout.tsx가 감싸고 있는 구조
• src/app 디렉토리에 새 폴더를 생성한 뒤 page.tsx 파일을 내부에 생성하면 해당 컴포넌트의 화면이 됨
• 그리고 next.js는 자동 라우팅을 지원해서 새로운 디렉토리의 이름이 곧 라우팅 주소가 됨!!
• Next.js와 React는 a태그 대신 Link 태그를 사용하자!!

<Link href="/">홈</Link>

🔸 폴더 구조 하나 더 알아두자면

• nextjs의 컴포넌터는 같은 디렉토리 내 layout.tsx 파일이 있으면 해당 컴포넌트에 감싸져서 렌더링됨
• 그런데 만약 상위 폴더에 또 layout.tsx가 있다면 이중으로 감싸져서 렌더링 되는 구조

✅ Map

• React와 동일하게 nextjs도 for 반복문을 사용할 수 없음
• 그러니 map함수를 주로 사용

{
  arr.map((item, index) => {
    return (
      <div key={index}>{item.name}</div>
    )
  }        
}

✅ Image

• 보통 사진 파일 public 폴더에 보관
• 사진 경로를 "/"로 시작하면 자동으로 public에서 파일을 찾음

🔸 최적화된 이미지를 넣으려면

• nextjs의 Image 태그 사용
• 다만 사진을 직접 import 해와서 사용해야함

import Image from "next/image";
import testImg from "/public/test-image.png";
...
<Image src={testImg}/>

• 직접 import를 해와야해서 반복문 등 여러 사진이 필요할 때는 곤란
• 외부 url로 이미지를 불러올 때는 width, height 속성을 지정해줘야하는 제약조건

✅ Component

• clinet/server component 두 종류
• 일반적인 파일에서 선언하는 컴포넌트들은 모두 server component
• 해당 파일 가장 상단에 "use client"를 선언하면 client component가 됨

🔸 server component

• html엘리먼트에 onClick같은 자바스크립트 기능 삽입 불가능
• useState, useEffect 등도 사용 불가
• 즉 html을 동적으로 제어하는 문법이 보통 불가함
• 실행할 js 코드들이 없어서 로딩 속도가 더 빠름!!
• 검색엔진 노출 유리
  
  

🔸 client component

• html 엘리먼트에 js 기능 및 useState등 훅 사용 가능
• js 코드가 많아 로딩 속도가 느림
• hydration(html을 유저에게 보낸 후 js로 html을 다시 읽고 분석하는 작업) 때문에 로딩 속도가 느림
  
  

🔸 그럼 언제 뭐가 더 좋음?

• 큰 페이지는 일반적으로 server component
• 그 안에서 js 코드가 들어가야한다면 client component로 분리해서 사용