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

상품명 잘 보이게 해보라던 저번시간 숙제는

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

map 함수 안에 파라미터 작명할 수 있다고 했습니다.

첫 파라미터는 상품 array 안에 있던 하나하나의 자료가 되니까 그걸 html 안에 집어넣으면 되겠군요. 

아니면 둘 째 파라미터는 정수라고 했으니 {상품[i]} 써도 될듯요 

 

[collapse]

---

반복문 사용시 주의사항

리액트에선 반복문 사용시 

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

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

보통 이렇게 i 집어넣음. 

상품.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 경로로 이동됩니다)

/부터 시작하면 됨. 

alt 속성도 집어넣어주기.

이미지 너무 커서 className 추가해줌. 

이렇게 넣어줌. 

---

최적화된 이미지 넣는 법 

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

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

* layout shift  = 이미지 로딩이 늦게돼서 사이트 레이아웃이 좀 밀리는 현상

이걸 방지하려면

이미지를 집어넣을 때 그냥 집어넣는게 아니라, 

상단에서 img 태그를 임포트 해옴. 

( 컴포넌트를 import ) 

그 다음에 img 태그말고 Image 저런식으로 갖다 씀.

근데 이렇게 쓰려면 제약 조건이 있음. 

이미지 경로를 

무조건 임포트 해와서 집어넣어줘야함.

임포트 문법의 정의.

import 문법 쓰려면 작명 먼저 해줌.

그리고 그 뒤에다가 갖고올 파일 경로 써주면 된다. 

그리고 작명한 이름을 경로로 써주면 된다. 

같아보이지만 아까와 다르게 최적화된 이미지를 보여줌. 

근데 반복문 안에서 각각 다른 이미지를 보여주고 싶은 경우는

좀 난감함.

그리고, 내 프로젝트 파일 안에 있는 이미지가 아닌,

외부사이트에 있는 이미지를 집어넣고 싶은 경우는 

이런 식으로 외부 이미지 경로를 집어넣으면 안됨.

저 옆에다가 with 와 height 속성을 강제로 집어넣어줘야 함.

저 이미지의 폭과 높이를 미리 알고 저렇게 집어넣어주면 된다. 

그리고 이것 뿐만 아니라

저 경로(외부)에 있는 이미지를 갖다 쓸 때는,

next.config.js 라는 파일에 간 다음에 ,

도메인 등록 등등 세팅이 필요함.

걍 이미지 태그 갖다가 쓸거임. 

상품마다 똑같은 이미지 보여주고 있음 

 

0으로 하드코딩 말고 i 변수 사용해주면 될듯.

변수같은거 쓰려면 중괄호 사용 

경로는 문자 자료니까 '' 따옴표 써줌. 

근데 좀 더러워보임

더 간단하게 하기

애초부터 따옴표를 백틱으로 바꿔줌

그 다음 ${} 이걸로 변수 넣으면 됨. 

---

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 경로에 파일 하나 만들고 하단 레이아웃 추가합시다. 

app 안에다가 카트 폴더 생성해주기

cart 폴더 안에다가 page.js 파일 생성. 

/cart 페이지 레이아웃은

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>
  )
} 

[collapse]

global.css

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