[Next.js] map, img 삽입하는 2가지 방법

💡 map 함수를 활용한 반복문

export default function List() {
    let products = ['Tomatoes', 'Pasta', 'Coconut']
    return (
        <div>
            <h4 className="title">상품 목록</h4>
            {
                products.map((product, i) => {
                    return (
                        <div className="food">
                            <h4>{products[i]} $40</h4>
                        </div>
                    )
                })
            }
        </div>
    );
}

 

우선 데이터베이스로부터 데이터를 받아왔다는 가정 하에 위에 products Array 를 선언해주었다.

Array이름.map(()=> {

})

이 형태로 반복문을 할 수 있으며, 위처럼 할 시에 해당 Array 요소 개수만큼 반복문이 돈다.

map 안에는 parameter 를 2개까지 넣을 수 있는데, vue 와 동일하게 

products.map((product, i) => {
    return (
        <div className="food" key={i}>
            <h4>{products[i]} $40</h4>
        </div>
    )
})

 

앞에 product 는 products Array 안에 요소 하나하나 를 가르키고, i 는 0 부터 카운트되는 변수이다.

return 을 하지 않으면 읽기만 하기 때문에 우리는 html 을 직접 드러내고 싶은 거라서

return 을 통해 html 을 나타내었다.

key

또 key 속성을 넣는 이유는 react 는 똑같은 요소들이 반복되면 서로 요소들을 구분하기 어려워하는데 반복 생성되는 html 요소마다 유니크한 값을 가지도록 key 를 설정해주었다.

---

💡 Image 추가하는 방법

1. Img 태그

export default function List() {
    let products = ['Tomatoes', 'Pasta', 'Coconut']
    return (
        <div>
            <h4 className="title">상품 목록</h4>
            {
                products.map((product, i) => {
                    return (
                        <div className="food" key={i}>
                            <img src={'/food' +i+ '.png'} className="food-img"></img>
                            <h4>{products[i]} $40</h4>
                        </div>
                    )
                })
            }
        </div>
    );
}

 

첫 번째는 img 태그를 이용한 방법이다.

최상위 폴더로 public 폴더를 만들었고 그 안에 png 이미지 파일들을 넣어줬다.

( public 폴더에 있는 애들은 사이트 발행 시 자동으로 사이트 root 경로로 이동됨 )

1. Image 태그

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

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

 

상단에 Image 태그와 이미지 들을 넣어주고,

위와 같은 방법으로 사용을 해준다.

 

이렇게 할 시에 lazy loading 등을 방지할 수 있고 이미지를 최적화된 이미지로 올릴 수 있다는 장점이 있다.

 

import Image from 'next/image'

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

 

하지만, 다른 사이트에 올려둔 이미지를 넣을 시에 width 와 height 를 직접 넣어줘야한다.

 

또 반복문을 사용하기가 쉽지가 않다. require 을 사용해야한다.

또 next.config.mjs 파일에 해당 사이트에서 이미지를 가져온다는 코드를 추가해주어야 한다.

 

최적화가 좋지만 단점도 확실하니까, 코딩을 끝내고 최적화하는 과정에서 꼭 필요한 이미지들에 적용하면 좋을 것 같다.