Next.js

map 반복문 사용시 key={유니크한 값}을 넣으면 좋다.

1. 이미지 넣는 법

• 일반 이미지 넣는 법 : <img src="경로" />

• 최적화된 이미지 넣는 법 : 상단에서 Image를 import 해와서 사용! <Image />
  lazy loading / 사이즈 최적화 / layout shift 방지
  layout shift란 이미지 로딩이 늦어져 레이아웃이 밀려나는 현상

• <Image /> 사용 제약 조건 : 이미지를 import 해서 경로를 넣어야 한다!
  import 작명 from '/public/food0.png' / src={작명}

• 단점
  반복문 안에서 다른 이미지를 보여줄 때는 복잡하다. / 외부 사이트의 이미지를 집어넣을 때도 어려운 점이 있다.

• 외부 이미지를 넣을 때는?
  <Image src="외부 링크" width={200} height={200} /> 이렇게 width, height 속성이 필요하다!
  그리고 next.config.js 셋팅도 필요하다!

• 이런 식으로...

const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '링크',
        port: '',
        pathname: '/my-bucket/',
      },
    ],
  },
}

최적화는 다 만든 후에 하는 것이 좋다!

• 상품마다 다 다른 사진을 넣고 싶다면?
  중괄호를 열고 백틱 기호를 넣어줌 <img src={백틱/food${i}.png백틱} />

---

2. Client / Server component, import 문법

• html을 깔끔하게 만들 수 있는 방법 중 하나 : html 덩어리들을 한 단어로 축약
  길고 복잡한 html을 한 단어로 축약하려면 Component

- Component 만드는 법

1. function 작명 () {}
   보통 영어 대문자로 시작함
2. return (축약할 긴 HTML)
3. <작명 /> 사용

function CartItem() {
  return (
    <div className="cart-item">
      <p>상품명</p>
      <p>$40</p>
      <p>1개</p>
    </div>
  );
}

component도 map 반복문 사용이 가능함
component 단점 : component 끼리의 데이터 공유가 귀찮다.
보통 재사용이 잦은 UI를 component로 만들어주면 좋다.

- Next.js에서의 컴포넌트

server component와 client comoponent가 있다!

• 아무데나 대충 만든 것은 server component

• 파일 맨 위에 'use client'를 넣고 만든 것은 client component

  • server component와 client comoponent의 차이

    server component는 html에 자바스크립트 기능 넣기 불가능!
    onClick={} 같은 기능을 사용할 수 없다. useState나 useEffect 등도 사용 불가!
    반면에 client component의 경우는 사용이 가능하다! (자유롭게 사용 가능!)
    그렇다면 client component가 좋은 것인가? : 좋다.
    server component의 장점 : 로딩 속도가 매우 빠름 / 검색엔진 노출 유리
    client component의 경우는 자바스크립트가 많이 필요하고 hydration이 필요해로딩 속도가 느리다. ( hydration : html 유저에게 보낸 후, 자바스크립트로 html을 다시 읽고 분석하는 일 )

• 큰 페이지는 server component / JS 기능이 필요한 부분은 client component 추천!
  해당 기능이 필요한 부분만 client component로 만들어 집어 넣는 방식으로...

- import 문법

• data.js 파일을 만들어 해당 파일에 데이터를 담아둔다고 하면, export default 변수함수명을 사용해 내보낸다.
• 그리고 다른 파일에서 import 해와서 사용!
  import 작명 from './data.js'
  경로 작성할 때, ./ 부터 시작하는 것이 좋다.
• 여러 개를 내보내고 싶을 때는? export {변수 / 함수명}
  export할 때, 중괄호를 썼다면 import할 때도 중괄호를 사용해야 한다! 작명하면 안 됨!
  import {age, name} from './data.js'

---

3. Props

props는 함수 파라미터와 비슷하다.

• function 안에 만든 변수는 function 안에서만 사용 가능
• 부모 컴포넌트의 변수나 데이터를 자식 컴포넌트가 사용할 수 있게 만들 수 있다. : props

• props 문법

  매번 약간 다른 내용으로 컴포넌트를 만들고 싶을 때 사용
  부모 -> 자식 데이터 전송은 props!

1. <자식component 작명="전할데이터" /> : 작명이라는 이름으로 자식에게 전달됨
2. 자식은 props.작명 사용 / funcrion CartItem(props){}

• 데이터가 많은 컴포넌트에서 필요하면 최상위 부모 컴포넌트에 보관해야 좋다!
  왜냐하면 부모 -> 자식 전송은 가능하지만, 자식1 -> 자식2 혹은 자식 -> 부모 전송은 불가능하기 때문에!

• Next.js에서는 보통 fetch()로 DB 데이터를 가져온다.
  같은 데이터 요청이 여러개면 1개로 압축해줌 (deduplication 기능)

  - fetch()

  전역 fetch() 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환한다.

---

---

참고 사이트 / 강의 출처

• [코딩애플] Next.js로 웹서비스 만들기
• fetch() 전역 함수
• Fetch API 사용하기