Next.js에서 이미지 넣는 법 2개

0:00 저번시간 숙제

2:05 이미지 넣는 법 

4:00 최적화된 이미지 넣는 법

7:43 상품이미지 넣기

8:59 /cart 페이지 만들기 

상품.map((a, i)=>{
    return (
      <div className="food">
        <h4>{a} $40</h4>
      </div>
    )
}) 

반복문 사용시 주의사항

리액트에선 반복문 사용시 

반복문으로 반복생성중인 html에는 key={} 속성을 집어넣으라고 권장합니다. 

{} 안에는 1씩 증가하는 정수 같은거 넣으면 됩니다. 

상품.map((a, i)=>{
    return (
      <div className="food" key={i}>
        <h4>{a} $40</h4>
      </div>
    )
}) 

넣으라고 하니까 넣어줍시다. 

페이지에 이미지 넣는 법

이미지는 그냥 public 폴더에 보관하고 필요한 페이지에 <img> 태그로 넣으면 됩니다.

다만 이미지 넣을 때 경로나 주의사항이 몇개 있는데

1. JSX에선 태그를 열었으면 항상 닫아야합니다.

쌩 html 파일에선 <img> 이렇게 단독으로 써도 되는데 

JSX에선 <img></img> 이렇게 쓰거나 <img /> 이렇게 쓰거나 합시다. 

2. 이미지는 public 폴더에 보관하고 

<img src="/port1.png" alt="설명"/>  

/부터 시작해서 이미지경로 넣으면 됩니다.

(public 폴더에 있는 것들은 사이트 발행시 자동으로 사이트 root 경로로 이동됩니다)

최적화된 이미지 넣는 법 

성능과 속도가 중요하다면 이미지 넣을 때 <Image /> 태그를 씁시다.

그럼 자동으로 이미지 lazy loading & 사이즈 최적화 & layout shift 방지를 해줍니다. 

import Image from 'next/image'

export default function Home() {
  return(
    <div>
      <Image />
    <div/>
)} 

1. 상단에서 <Image> 태그를 import 해온 뒤에 이미지 보여주길 원하는 곳에서 <Image/> 사용하면 됩니다. 

import Image from 'next/image'
import 이미지 from './food0.png'

export default function Home() {
  return(
    <div>
      <Image src={이미지} alt="설명"/>
    <div/>
)} 

2. 이미지 경로를 넣으려면 이미지를 상단에서 import 해온 뒤에 그걸 넣어야합니다. 

./ 이건 현재경로라는 뜻이라 이미지가 현재파일 바로 옆에 있으면 위처럼 작성하면 됩니다. 

public 폴더에 있으면 경로는 /public/어쩌구.png 하면 됩니다. 

(참고) 이미지 높이가 이상해지면 height: auto; 스타일도 줍시다.

import Image from 'next/image'

export default function Home() {
  return(
    <div>
      <Image src="https://placehold.co/500" width="500" height="500"/>
    <div/>
)} 

3. 참고로 다른 사이트에 올려둔 이미지를 <Image>에 절대경로로 집어넣고 싶으면 

(1) width, height 옵션을 집어넣어야합니다. 

혹은 fill="true" 이거 대신 넣고 부모 <div>가 width, height를 대신 조절해도 됩니다.

(2) 위처럼 내 사이트 말고 다른 URL에서 가져오고 싶으면 하단 링크처럼 셋팅도 해놔야합니다. 

https://beta.nextjs.org/docs/optimizing/images#remote-images

귀찮아서 외부 사이트 이미지들은 그냥 <Image>말고 <img> 태그 쓰는게 편할 수도 있습니다. 

lazy loading 기능만 원하면 다른 라이브러리 찾아봐도 됩니다.

실은 원래 최적화는 사이트 다 만들고나서 하는게 좋은 관습이기 때문에 지금은 참고로만 알아둬도 됩니다. 

/cart 페이지

다음 수업 때 사용할 새로운 페이지가 하나 필요한데 

거기다가 대충 장바구니 레이아웃을 추가하고 시작해봅시다. 

/app/cart/page.js 경로에 파일 하나 만들고 하단 레이아웃 추가합시다. 

export default function Cart() {
  return (
    <div>
      <h4 className="title">Cart</h4>
      <div className="cart-item">
        <p>상품명</p>
        <p>$40</p>
        <p>1개</p>
      </div>
      <div className="cart-item">
        <p>상품명</p>
        <p>$40</p>
        <p>1개</p>
      </div>
    </div>
  )
} 

.cart-item {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid grey;
  line-height: 0px;
}