[React] 정적 이미지 파일 사용하기

안녕하세요. J4J입니다.

 

이번 포스팅은 정적 이미지 파일 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

리액트를 이용하여 개발하다 보면 프로젝트 내부에 이미지 파일을 저장해둔 뒤 화면에 불러오는 작업을 쉽게 마주할 수 있습니다.

 

저의 경험담이기도 하지만 여기서 당황스러웠던 점은 html에서 하던 방식으로 이미지를 불러올 경우 정상적으로 동작되지 않는다는 것입니다.

 

리액트에서는 부가적인 설정을 해줘야 하는데 해당 방법에 대해 글을 적어보도록 하겠습니다.

 

 

 

정적 이미지 파일 불러오는 방법

 

[ 1. 패키지 설치 ]

 

$ npm install file-loader

 

 

반응형

 

 

[ 2. webpack설정 파일에 로더 등록 ]

 

module: {
  rules: [
    {
      // babel loader
    },
    {
      test: /\.(png|jpg|gif|svg)$/, // 확장자가 png, jpg, gif, svg인것에 대해서만 등록
      loader: 'file-loader',
    },  
  ]
},

 

※ 추가 → webpack 5버전대 이상을 사용하시는 분들은 loader대신 use를 입력하시면 됩니다.

 

 

 

[ 3. 이미지를 사용할 파일 ]

 

저는 간단하게 App.jsx에 카카오프렌즈 사진을 로드해보겠습니다.

 

사진은 자유롭게 구해서 프로젝트 내부 편한곳에 저장해두시고 다음과 같이 이미지를 불러와 사용하시면 됩니다.

 

import * as React from 'react';
import kakaofriends from '../public/image/kakaofriends.png';

const App = () => {
    return (
        <div>
            <h2>카카오프렌즈 사진...</h2>
            <img src={kakaofriends} />
        </div>
    )
}

export default App;

 

 

728x90

 

 

실행 결과

 

위와 같이 설정하고 실행을 해보면  다음과 같이 이미지가 나오는 것을 확인할 수 있습니다.

 

실행 결과

 

 

 

 

 

 

이상으로 정적 이미지 파일 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.