React에서 로컬 이미지 참조하기에 대한 종합 안내서

리액트에서 로컬 이미지를 참조하는 방법

리액트에서 프로젝트에 로컬 이미지를 포함하고 싶다면 몇 가지 도전이 있을 수 있습니다. 이 튜토리얼에서는 이 문제를 해결하고 리액트에서 로컬 이미지를 참조하는 다양한 접근 방법을 탐색해보겠습니다.

메소드 1: 웹팩과 require 사용하기

웹팩 설정 파일에 액세스할 수 있다면, require 메소드를 사용하여 이미지를 컴포넌트에 포함시킬 수 있습니다.

import React from 'react';
import myImage from './myImage.jpg';

const MyComponent = () => {
  return (
    <div>
      <img src={require('./myImage.jpg')} alt="My Image" />
    </div>
  );
};

export default MyComponent;

메소드 2: 이미지 직접 가져오기

웹팩 설정 파일에 액세스할 수 없다면, ES6 import 구문을 사용하여 이미지를 컴포넌트에 직접 가져올 수 있습니다.

import React from 'react';
import myImage from './myImage.jpg';

const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
};

export default MyComponent;

메소드 3: 공용 폴더 활용하기

대체 방법은 리액트 프로젝트의 공용 폴더에 이미지를 놓고 그에 맞게 참조하는 것입니다.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src={process.env.PUBLIC_URL + '/myImage.jpg'} alt="My Image" />
    </div>
  );
};

export default MyComponent;

메소드 4: .default와 함께 require 사용하기

일부 경우에는 require을 사용하고 가져온 이미지의 .default 속성에 액세스해야 할 수도 있습니다.

import React from 'react';
import myImage from './myImage.jpg';

const MyComponent = () => {
  return (
    <div>
      <img src={require('./myImage.jpg').default} alt="My Image" />
    </div>
  );
};

export default MyComponent;

메소드 5: 중괄호로 이미지 소스 감싸기

웹팩을 사용하지 않고 이미지를 직접 참조하려면 이미지 소스를 중괄호로 감싸세요.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src={'myImage.jpg'} alt="My Image" />
    </div>
  );
};

export default MyComponent;

결론

리액트에서 로컬 이미지를 참조하는 것은 프로젝트 설정에 따라 다양한 방법으로 수행할 수 있습니다. 웹팩 설정 파일에 액세스할 수 있든 없든, 리액트 컴포넌트에 이미지를 성공적으로 포함시킬 수 있습니다. 프로젝트에 가장 적합한 방법을 선택하고 시각적으로 매력적인 이미지로 리액트 애플리케이션을 더욱 개선해보세요.

참고 자료 : 

reactjs