React 인라인 스타일을 사용하여 배경 이미지 설정하기

1. 인라인 스타일을 사용하여 React에서 배경 이미지 설정하기
2. 인라인 스타일을 사용하여 React에서 로컬 이미지를 배경으로 설정하기

복잡한 웹 애플리케이션을 구축할 때 개발자는 종종 사용자 정의 배경 이미지를 설정해야 합니다. 표준 접근 방식은 CSS와 HTML을 사용하는 것입니다.
React 애플리케이션을 개발할 때 배경 이미지를 설정하기 위한 많은 옵션이 있습니다. 일반 CSS 파일을 사용하거나 React의 인라인 스타일과 같은 CSS-in-JS 솔루션을 사용할 수 있습니다.

인라인 스타일을 사용하여 React에서 배경 이미지 설정하기

인라인 스타일을 사용하면 JavaScript 파일 내에서 HTML 또는 React 구성 요소의 스타일을 구성할 수 있습니다. 다음은 React 클래스 구성 요소에서 배경 이미지를 설정하는 예입니다.

class App extends Component {
  render() {
    const containerStyle = {
      backgroundImage:
        "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

HTML 대 JSX

HTML과 마찬가지로 JSX에서 컨테이너의 style 속성을 사용하여 인라인 스타일을 정의합니다. 그러나 HTML과 달리 단순한 텍스트로 값을 설정할 수 없습니다. 대신 중괄호를 사용하여 JavaScript 변수 containerStyle을 전달합니다. 이 변수는 본질적으로 CSS 속성과 해당 값의 키-값 쌍을 포함하는 객체입니다.

한 가지 중요한 차이점은 style 개체의 키에 공백이나 기타 영숫자가 아닌 기호가 포함되어서는 안 된다는 것입니다. 일반 CSS에서 속성은 background-image로 정의되지만 JavaScript에서는 style 객체의 backgroundImage 속성이 됩니다.

CSS-in-JS 솔루션을 사용하는 또 다른 이점은 스타일 정의에 변수 참조가 포함될 수 있다는 것입니다. 이것은 템플릿 리터럴을 사용하여 달성됩니다. 다음은 예입니다.

class App extends Component {
  render() {
    const backgroundImageURL =
      "https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
    const containerStyle = {
      backgroundImage:
        `url(${backgroundImageURL})`,
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

이 경우 스타일은 변수의 변경 사항을 반영합니다.

인라인 스타일을 사용하여 React에서 로컬 이미지를 배경으로 설정하기

로컬 assets 폴더의 이미지를 사용하려면 import 문 또는 require() 메서드를 사용하여 로드할 수 있습니다. 그러나 이미지 로드는 개발 환경에 웹팩이 포함된 경우에만 작동합니다.

이미지를 앱에 로드하기 위해 어떤 방법을 선택하든 상대 경로를 지정해야 합니다.

import image from "./assets/filename.jpg"

이 상대 경로는 구성 요소와 자산 폴더가 모두 src 폴더에 있다고 가정합니다.

이미지를 가져오면 변수를 참조하는 것처럼 가져오기 이름(이 경우 image)으로 참조할 수 있습니다. 앱에서 사용하는 모든 이미지는 별도로 가져와야 하지만 배경 이미지는 한 번만 가져오면 됩니다.

별도의 변수를 만들어 require() 메서드로 로드된 이미지 값을 저장하는 데 사용할 수도 있습니다.

const image = require("./assets/filename.jpg")

이미지를 로드하고 변수 이름을 지정하면 더 읽기 쉽고 필요할 때마다 자유롭게 변경할 수 있습니다.