[React] - 이미지 삽입하기

• react에서 이미지를 삽입하는 방법에는 여러가지가 있다. 대표적인 방법들을 알아보도록 하자.

• <img> 태그 사용 : 이미지 경로를 import 해준 뒤 <img> 태그를 사용해서 이미지를 삽입한다. 단, 이미지가 많은 경우 사용하기 불편하다.

import pic1 from './img/pic1.jpg'
import pic2 from './img/pic2.jpg'

<img src={pic1} alt='picture1' height='100px' width='200px' /> 
<img src={pic2} alt='picture2' height='100px' width='200px' /> 

• or 그냥 바로 <img> 태그에 경로 넣어서 삽입

const MyImageComponent = () => {
  return (
    <div>
      <img src="path/to/your/image.jpg" alt="Description" />
    </div>
  );
};

• html 사용 : 이미지 경로를 import한 뒤 사용할 태그 내에서 style 속성을 사용해 컴포넌트에 스타일을 적용한다.

import pic1 from './img/pic1.jpg'

<div className='mainImage' 
style={{backgroundImage : 'url(' + pic1 + ')'}}></div>

• import문 사용 : 이미지 파일을 js 파일로 import하고, 이를 변수로 사용한다.

import React from 'react';
import myImage from './path/to/your/image.jpg';
const MyImageComponent = () => {
  return (
    <div>
      <img src={myImage} alt="Description" />
    </div>
  );
};
export default MyImageComponent;

• CSS background-image 사용

• 사용할 사진을 src 폴더에 넣은 후

/* MyComponent.css */
.image-container {
  background-image: url('./path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
}

• 외부 이미지 url 사용

function MyComponent() {
  const imageUrl = 'https://example.com/path/to/external/image.jpg';
  return (
    <div>
      <img src={imageUrl} alt="pic1" />
    </div>
  );
}

public 폴더를 통해 이미지 삽입하기

> 리액트의 public 폴더는 프로젝트의 루트 디렉토리에 위치하며, 애플리케이션의 빌드 시에 생성되는 정적 파일들을 담는 곳이다. public 폴더에 있는 파일들은 웹팩 또는 기타 번들링 도구를 사용하지 않고도 정적으로 서빙됩니다. 이 폴더에 있는 파일들은 빌드 시에 빌드 결과물과 함께 최종 애플리케이션 디렉토리에 복사된다.

> 반면 src 폴더는 주로 소스 코드를 담고 있는 폴더로, 이 폴더 안에 있는 파일들은 웹팩이나 번들링 도구를 통해 빌드되어 최종 번들에 포함된다. 따라서 src 폴더 안의 파일들은 모듈 시스템을 따르며, 상대 경로나 모듈 경로를 통해 불러와진다.

> public 폴더는 정적 파일을 관리하고 서빙하기 위한 용도로 사용되며, src 폴더는 애플리케이션의 소스 코드를 담는 공간으로 결국 전부 압축된다. 그렇기 때문에 (public 폴더 안에 img 폴더를 만들어 사진 저장 -> img 태그 이용해 이미지 삽입)을 하는 것이 좋다.

❗️ src 경로를 지정할 때, public 내의 절대 경로를 이용해야 나중에 오류가 나지 않는다. 그러므로 process.env.PUBLIC_URL 를 이용할 것 ❗️

function MyComponent() {
  const imagePath = process.env.PUBLIC_URL + '/images/example.jpg';

  return (
    <div>
      <img src={imagePath} alt="이미지 설명" />
    </div>
  );
}