React Img src

1. create-react-app 패키지를 사용하여 React에서 로컬 이미지 참조
2. React에서 import 문을 사용하여 이미지 로드
3. React에서 require() 메소드를 사용하여 이미지 로드
4. React에서 import 및 require() 작동 방법

React가 처음이라면 React가 JSX라는 HTML과 유사한 구문을 사용한다는 사실을 눈치채셨을 것입니다. 이 구문은 React 애플리케이션을 작성하는 간단한 방법을 제공합니다. 앱에 이미지를 포함하는 것과 관련하여 상황이 약간 혼란스러워집니다. HTML과 달리 React 코드는 사용자에게 표시되기 전에 많은 변경을 거칩니다.

현상 모드에서 프로덕션 모드로 전환할 때 이미지의 상대적 위치가 변경될 수 있습니다. React 구성 요소에 이미지를 가져오고 포함하는 안정적인 방법이 필요합니다.

create-react-app 패키지를 사용하여 React에서 로컬 이미지 참조

React 애플리케이션을 개발할 때 개발 환경에 webpack이 포함되어 있으면 이미지를 쉽게 포함할 수 있습니다. create-react-app 패키지를 사용하면 webpack이 자동으로 포함됩니다.

JSX의 요소 태그는 HTML에서와 같은 방식으로 작동합니다. 자체 닫는 img 태그입니다. 개발자는 src 속성을 사용하여 경로를 지정할 수 있습니다. 이 예에서 <img/> 요소는 하드 코딩된 이미지 URL을 소스로 사용합니다.

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

폴더 내의 이미지 위치에 대한 상대 경로를 지정하려는 경우 상황이 조금 더 복잡해집니다. 이미지 소스를 제공하는 것은 src 속성을 컴퓨터의 상대 파일 경로와 동일하게 설정하는 것만큼 간단하지 않습니다. 우선, 샌드박스 브라우저는 컴퓨터의 src 상대 파일 경로에 액세스할 수 없습니다. 특히 애플리케이션이 배포되면 로컬 경로 이름에 의존할 수 없습니다. 대신 개발자는 import 또는 require() 문을 사용하여 이미지를 로드해야 합니다.

create-react-app 프로젝트를 개발할 때 모든 이미지를 저장할 자산 폴더를 갖는 것이 좋습니다. 일반적으로 이 폴더는 프로젝트의 src 폴더에 생성됩니다. 이미지 저장에 대해 이 규칙을 따른다고 가정하고 src 속성의 값으로 이미지를 가져오고 사용하는 방법을 살펴보겠습니다.

React에서 import 문을 사용하여 이미지 로드

import 문을 사용하여 이미지를 로드할 수도 있습니다. 간단해 보이고 하드 코딩된 URL과 동일한 목표를 달성합니다.

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

유효한 경로를 제공하는 한 create-react-app에 이미지가 표시되어야 합니다.

이 경우 testComponent 및 assets 폴더가 src 폴더에 있기 때문에 경로가 작동합니다. 경로의 끝 - cat.jpg는 개별 파일의 이름일 뿐입니다.

import 문은 가져온 자산을 변수에 저장하는 추가 이점을 제공합니다. 값을 src 속성으로 설정할 때 import 문에서 변수 이름을 참조할 수 있습니다.

가져오기에 대한 자세한 내용은 여기를 참조하세요.

React에서 require() 메소드를 사용하여 이미지 로드

React 개발자는 require() 메서드를 사용하여 다양한 유형의 모듈을 로드합니다. 이미지 로드에도 사용할 수 있습니다.

JSX 내에서 사용하려면 require() 메서드를 중괄호 사이에 넣어야 합니다. 아시다시피 중괄호 사이의 코드는 JSX에서 유효한 JavaScript로 해석됩니다.

<img src={require("./assets/cat.jpg").default} />

require() 메소드는 이미지에 대한 유효한 상대 경로인 하나의 인수를 취합니다. 또한 일부 브라우저에서는 반환된 객체의 .default 속성에 액세스해야 합니다.

또는 image 변수를 만들어 이미지를 저장한 다음 구성 요소에서 참조할 수 있습니다. 다음은 예입니다.

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

변수 이름은 원하는 대로 지정할 수 있습니다. image라고 부를 필요는 없습니다.

React에서 JavaScript 변수를 참조하려면 중괄호로 묶어야 합니다.

require() 메서드와 성능에 관한 import 문 사이에는 차이가 없습니다.

React에서 import 및 require() 작동 방법

일부 React 개발자는 webpack(및 기타 번들러)이 JavaScript나 React가 아닌 이미지 로딩을 처리한다는 사실에 놀라움을 금치 못할 수도 있습니다.

구성 요소에 이미지를 로드하면 번들러가 구성 요소와 이미지 간의 연결을 내부적으로 기록합니다. 그런 다음 자산을 소싱하고 복사하고 고유한 이름을 지정하고 서버의 액세스 가능한 디렉토리에 배치합니다.