이미지 추가

nextjs 에서 이미지를 추가하는 방법중 최적화를 해서 하는 방법이 있다고 한다. 

 

기존 방식은 

 

import React from 'react'


export default function List() {
    let 상품 = ['Tomatos','Pasta','Coconut'];
      
  return (
    <div className='title'>
        <h4>상품목록</h4>
        {
          상품.map((value, index)=>{
            return (
              <div className='food' key={index}>
                <img className='food-img' src={`/food${index}.png`}/>
               <h4>{value} $40</h4>
             </div>
            )
        })
        }
    </div>
  )
}

이런식으로 img 태그를 활용해서 public에 선언한 이미지명을 불러오는 방식이었다.

 

최적화된 이미지 넣는 방법

성능과 속도가 중요하다고 생각이 될때는, <Image/>라는 태그가 있다. 

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

 

방법은

1. 상단에 <image> 태그를 import 해와야한다. 

2. 이미지 경로를 넣을려면 이미지를 상단에서 import 해온뒤 그걸 넣어야한다. (이게 쫌...그럼)

import Image from 'next/image';
import React from 'react'
import image from '/public/food0.png'

export default function List() {
    let 상품 = ['Tomatos','Pasta','Coconut'];
      
  return (
    <div className='title'>
        <h4>상품목록</h4>
        {
          상품.map((value, index)=>{
            return (
              <div className='food' key={index}>
                <Image className='food-img' src={image} />
                {/* <img className='food-img' src={`/food${index}.png`}/> */}
               <h4>{value} $40</h4>
             </div>
            )
        })
        }
    </div>
  )
}

 

 

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

import Image from 'next/image'

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

width,height 을 직접 넣어줘야 된다고 한다. 

 

 

고민되는 문제 

import를 해서 이미지명을 직접 가져오게되면, map함수를 사용했을때, 동일이미지만 표시할 수 밖에 없다. 이걸 해결하기위한 다른 방법이 있을거라 생각이 되지만 지금당장은 모르겠으니 좀더 공부를하면서 찾아봐야겠다.