이미지 삽입하기(css, html, public폴더에서 가져오기)

김현준·2024년 9월 1일

리액트 이모저모

목록 보기

19/27

React에서 이미지를 삽입하는 방법은 3가지가 있다.

1. css파일 내에서 이미지 접근할 때

//App.css
background-image: url('이미지 경로');

css 파일에서 이미지의 url 경로 혹은 src폴더 내의 이미지 파일을 가져오고 싶을 때
url()에 이미지 경로를 삽입하면 된다.

CSS 파일에서 이미지를 삽입할 때, url() 내부의 경로는 상대경로와 절대경로 모두 사용 가능하다. 다만, 웹팩(Webpack) 등의 빌드 도구를 사용할 경우 상대경로를 사용하는 것이 권장

만약 이미지가 src 폴더 내에 있다면, Webpack이 해당 이미지를 빌드 프로세스 중에 처리할 수 있도록 경로를 주의해야 한다. 예를 들어, 절대 경로를 사용하면 이미지가 빌드 이후에도 올바르게 참조되지 않을 수 있다.

2. html 파일 내에서 src폴더 내 이미지에 접근할 때 (2가지)

//App.js

import image1 from './image.png'

function App(){
  return(
    <>
      ...
      
      <div className="image1" style={{ backgroundImage : 'url(' + image1 + ')' }}></div>
      <img className="image2" src={image1}/>
    </>
  )
}

1. import 이미지이름 from 경로를 통해서 먼저 이미지를 가져온다. (경로는 ./로 시작)

2-1. style={ {backgroundImage: 'url(' + 이미지이름 + ')' } }

2-2. img 태그 사용 시 : <img src={ 이미지이름 }/>

JSX에서 이미지 접근

import를 사용하는 이유
JavaScript 파일에서 이미지 파일을 import하면, Webpack이 해당 이미지를 모듈로 간주하고 빌드 프로세스 중에 파일 경로를 처리해 준다.
이로 인해 이미지 파일의 실제 경로가 변경되어도 문제가 발생하지 않으며, 코드에서 참조하는 경로는 Webpack이 관리하게 된다.

동적 경로 사용
만약 이미지 경로가 동적으로 결정되는 경우 require()를 사용할 수 있다. 예를 들어, <img src={require(./images/${imageName}.png)} />와 같이 사용할 수 있다.
이는 컴파일 시점에 경로가 결정되므로, 변수를 통해 동적으로 경로를 설정할 때 유용하다.

3. public 폴더에서 가져올 때

1) public폴더의 역할

React App을 완성한 후 배포를 위해 build를 하면 한 파일로 압축을 한다.
이때 public폴더는 압축되지 않고 형태를 그대로 유지한다.

따라서 수정이 필요하지 않은 static파일(이미지, json, 텍스트 등)은 public 폴더에 저장해도 된다.

2) public폴더의 이미지 가져오기

<img src={process.env.PUBLIC_URL + '/경로'} />

위와 같은 형식으로
process.env.PUBLUC_URL + '/경로'를 이용해 이미지를 가져올 수 있다.

만약 메인 URL에 이미지를 가져올 때는 '/경로'만으로도 가져올 수 있지만
endpoint가 추가될 경우 브라우저에서 이미지를 가져올 때 파일을 찾지 못할 수 있기 때문에
process.env.PUBLUC_URL을 붙여주는 것이 권장되는 방법이다.

Public 폴더에서 이미지를 가져올 때 추가로 고려할 점

Static 파일 처리
Public 폴더에 저장된 파일은 빌드 과정에서 변환되지 않고 그대로 남아있기 때문에, 수정이 필요 없는 정적 파일들(예: 이미지, JSON 파일, 텍스트 파일)을 여기에 두는 것이 좋다.

이미지 경로 처리
<img src={process.env.PUBLIC_URL + '/경로'} />를 사용하는 경우, React가 제공하는 process.env.PUBLIC_URL을 통해 현재 애플리케이션의 루트 경로를 기준으로 이미지를 가져올 수 있다.
이렇게 하면 배포 후 다양한 경로에서 이미지가 제대로 참조되도록 보장할 수 있다.
또한, endpoint가 추가되는 경우 이미지가 올바르게 로드되지 않을 수 있기 때문에 이 방법을 사용하는 것이 권장된다.