[CSS] CSS로 외부 파일 경로 설정하기

일반적인 CSS에서는 url 속성을 다음과 같이 설정합니다.

.SomeStyle {
  background-image: url('./directory/to/the/image.svg');
}

 

이를 React에서 사용하기 위한 JSX 형식으로 바꾸면 이렇게 될텐데요,

const SomeStyle = {
  backgroundImage: "url('./directory/to/the/image.svg')"
};

 

실제로 이를 실행하면 정상적으로 동작하지 않습니다. 이는 React가 실행되는 방식과 관계가 있습니다.

 

우리가 작성한 JSX 코드는 프로젝트를 실행할 때 실행 가능한 JS 코드 형태로 변환됩니다.

이 과정에서 파일의 위치 또한 달라질 수 있는데, 파일 경로 자체가 수정되거나 용량이 작은 파일인 경우 JS 코드에 포함시킬 수도 있습니다.

 

때문에 위의 React 코드가 실행되는 상황에서는 파일의 경로가 달라질 수 있기 때문에 style이 반영되지 않게 됩니다.

 

이 문제를 해결하기 위해서 두 가지 방법을 사용할 수 있습니다.

1. public 폴더 사용

이미지를 src 폴더가 아닌 public 폴더에 넣고, public 폴더를 기준으로 상대 경로를 작성합니다.

// public 폴더에 image.svg를 이동했습니다
const SomeStyle = {
  backgroundImage: "url(./image.svg)",
};

2. import 사용

import를 통해 이미지 파일을 미리 불러온 후 css style 객체에서 사용합니다.

실제로 JSX에서의 import는 실행 될 때 const image = './assets/image.svg'; 형태의 JS 코드로 바뀝니다.

import image from './assets/image.svg';

const SomeStyle = {
  backgroundImage: `url('${image}')`,
};