리액트 배경 이미지 튜토리얼 - CSS 인라인으로 backgroundImage를 설정하는 방법

Original article: React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style

리액트에서 인라인 CSS 방식으로 backgroundImage 속성을 지정하는 방법은 네 가지가 있습니다.

이번 튜토리얼에서는 각각의 예제 코드와 함께 이 네 가지 방법을 소개합니다.

리액트에서 외부 url을 사용해 배경 이미지를 설정하는 방법

만약 이미지가 온라인상 어딘가에 존재한다면 다음과 같이 요소에 url을 넣어 배경 이미지를 설정할 수 있습니다.

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

외부 url을 사용해 배경 이미지를 설정하는 방법

위의 코드는 background-image: url(https://via.placeholder.com/500)이라는 스타일이 적용된 <div> 요소를 렌더링할 것입니다.

리액트에서 /src 폴더 내 배경 이미지를 불러오는 방법

만약 여러분이 Create React App을 사용해 앱을 만들어 이미지가 src/ 폴더 내에 있는 경우라면, 이미지를 먼저 import 한 후에 요소의 배경으로 설정할 수 있습니다.

import React from "react";
import background from "./img/placeholder.png";
function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}
export default App;

import한 이미지로 배경을 설정하는 방법

npm start 명령어를 입력하면, 리액트는 "컴파일 실패"라는 에러를 보여주고 이미지를 찾지 못해 빌드를 멈출 것입니다.

이미지를 찾지 못해 컴파일에 실패한 리액트

이렇게 되면 웹 앱에 깨진 이미지 링크가 표시되지 않습니다. 위의 코드에서 backgroundImg 값으로 템플릿 문자열이 사용되었기 때문에 자바스크립트 표현식을 포함할 수 있습니다.

리액트에서 상대 경로로 배경 이미지를 불러오는 방법

Create React App에서 public/ 폴더는 리액트 앱에 사용되는 정적 assets 파일들을 담고 있습니다. 이 폴더에 넣는 모든 파일은 온라인상으로 접근 가능합니다.

public/ 폴더 내에 image.png 파일을 넣게 되면 <호스트 주소>/image.png 경로로 접근할 수 있습니다. 로컬 컴퓨터에서 리액트를 실행한 경우라면 http://localhost:3000/image.png에서 이미지가 보일 것입니다.

배경 이미지를 설정하기 위해서는 호스트 주소에 상대 경로를 지정해주면 됩니다.

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

상대 경로로 배경 이미지를 설정하는 방법

위의 예시처럼 url 경로를 /image.png로 설정하면 브라우저는 <host 주소>/image.png에서 배경 이미지를 찾을 것입니다.

이미지들을 폴더 내에 따로 정리하고 싶다면 다음과 같이 public/ 내에 다른 폴더를 만들 수도 있습니다.

public/ 폴더 내에 img/ 폴더 만들기

만약 다른 폴더를 만들었다면 backgroundImage의 값으로 url(/img/image.png)를 넣어주는 것을 잊지 마세요.

리액트에서 절대 경로로 배경 이미지를 불러오는 방법

Create React App의 PUBLIC_URL 환경 변수에 절대 경로를 포함해 다음과 같이 사용할 수도 있습니다.

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

절대 경로를 사용해 배경 이미지 설정하기

로컬 컴퓨터에서 이 코드를 실행하면 리액트 스크립트가 PUBLIC_URL의 값을 처리할 것입니다. 로컬에서는 절대 경로가 아닌 상대 경로처럼 보일 것입니다.

이미지의 절대 경로는 로컬 컴퓨터에서 보이지 않음

절대 경로는 나중에 리액트를 실제 앱으로 배포할 때 보이게 될 것입니다.

추가 속성과 함께 배경 이미지를 설정하는 방법

배경 이미지를 추가적으로 커스터마이즈 하고 싶다면 다음 예시와 같이 backgroundImage 이후에 추가 속성을 지정해 줄 수 있습니다.

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

추가 속성과 함께 배경 이미지를 설정하는 방법

위에서 설정한 속성들은 <div> 요소에 배경 이미지를 넣고 background-repeat: no-repeat과 width: 250px을 지정하고 있습니다.

읽어주셔서 감사드리고, 이 글이 도움이 되었으면 좋겠습니다. 혹시 질문이 있으시면 제 트위터를 찾아주세요. 개발자들을 위한 짧은 팁들도 종종 올리겠습니다. 🙂