react-portfolio : gallery

Gallery 페이지 만들기

공통 Header 만들기

Gallery.jsx

import Header from '../../components/Header';
import HeaderImage from '../../images/header_bg_3.jpg';

const Gallery = () => {
  return(
    <>
      <Header title="Our Gallery" image={HeaderImage}>
      Lorenm ipsum dolor sit amet consetetur adipisicing elit.
      </Header>
    </>
  )
}

export default Gallery;

---

images 폴더 안에 있는 갤러리 이미지들을(gallery1,gallery2,gallery3.... ) 가져오기

Gallery.jsx

const Gallery = () => {
  const galleryLength = 15;
  const images = [];

  for(let i=1; i<galleryLength; i++){
    images.push(require(`../../images/gallery${i}.jpg`))
  }
  console.log(images)
}

for문을 돌려서 gallery 이미지 (1,2,3,4,5~15)까지의 이미지들을 images 배열에 넣어 주었습니다.

images 배열안에 넣어준 이미지들을 화면에 출력

return(
    <>
      <Header title="Our Gallery" image={HeaderImage}>
      Lorenm ipsum dolor sit amet consetetur adipisicing elit.
      </Header>
      <section className="gallery">
        <div className="container gallery__container">
          {
            images.map((image, index)=>{
              return <article key={index}>
                <img src={image} alt={`Gallery Image ${index+1}`}/>
              </article>
            })
          }
        </div>
      </section>
    </>
  )

images배열의 값을 map함수를 사용해 article 태그에 img 태그(이미지 경로)를 넣어주었습니다.