리액트에서 이미지(image) 태그 잘 사용하기

리액트에서 이미지 태그를 잘 사용하는 방법을 알아봅시다.

해당 글의 번역입니다.

 https://daveceddia.com/react-image-tag/

Using the image tag in React

React 이미지 태그는 약간 이상합니다.

이것은 실제로 React의 잘못이 아니라, 앱이 빌드된 후 서버에서 이미지가 상주할 위치의 문제입니다.

나는 여기서 평범한 기존 <img src=""/> 태그에 대해 이야기하고 있습니다. HTML에서 사용하는 것과 동일합니다.

React 컴포넌트에서 img의 src 프롭은 서버가 제공할 수 있는 파일을 가리켜야 합니다.

---

컴퓨터 파일 경로를 사용하지 마세요

초보자의 일반적인 실수는

src를 /Users/yourname/Projects/this-react-app/src/image.png와 같이

컴퓨터의 파일 경로로 설정하는 것입니다.

이는 동작하지 않습니다.

브라우저는 요즘 대부분 샌드박스 처리되어 디스크의 경로로 파일에 액세스할 수 없습니다.

웹 서버가 같은 위치에 해당 파일을 갖고 있지 않기 때문에 앱을 배포하자마자 오류를 발견할 수 있습니다.

(아니요, 솔루션은 서버의 같은 위치에 두는 것이 아닙니다!!)

---

리액트 컴포넌트에 이미지를 추가하는 방법

React에는 빌드 단계에 이미지를 포함할 방법이 필요합니다.

주로 사용하는 2가지 방법이 있습니다.

Create React App 프로젝트를 가정하겠습니다.

• public 디렉토리의 모든 것이 서버로 복사됩니다.
• src 아래의 모든 것이 JS 파일로 가져오는 것이 타당한 파일들입니다.

옵션 1 : 이미지를 컴포넌트로 임포트하기

이미지 파일을 src 폴더 아래 어딘가에 넣습니다.

이것만으로는 바로 사용할 수 없으므로 이미지를 사용 중인 React 컴포넌트로 가져와야 합니다.

import companyLogo from './path/to/logo.jpg';

다음에 해당 변수 이름으로 해당 이미지를 참조할 수 있습니다.

이름은 원하는 대로 지정할 수 있으며 이미지 파일명와 일치하지 않아도 됩니다.

이미지를 표시하려는 곳마다 img 태그를 렌더링하고 해당 변수를 src로 전달합니다.

function Home() {
  return (
    <div>
      <img src={companyLogo} alt="BigCo Inc. logo"/>
    </div>
  );
}

가져온 이미지를 사용하는 경우 중괄호를 사용해야 합니다.
중괄호는 JS 변수를 프롭으로 전달하는 방법입니다.

---

옵션 2 : 이미지를 퍼블릭 폴더에 놓기

이미지 파일을 퍼블릭 폴더에 넣을 수 있습니다(Create React App이 아닌 경우… 서버에 복사될 폴더에 놓을 수 있습니다.)

그런 다음 서버가 퍼블릭 폴더를 "root" 디렉토리(/)로 취급한다고 가정하면

일반 HTML과 마찬가지로 해당 디렉토리에 대해 이미지를 사용할 수 있습니다.

따라서 public/images/thing.jpg에 이미지가 있는 경우 해당 이미지를 다음과 같이 표시할 수 있습니다.

function Home() {
  return (
    <div>
      <img src="images/logo.jpg" alt="BigCo Inc. logo"/>
    </div>
  );
}

이 방법을 사용하면 웹 서버에서 이미지를 일반 파일로 사용할 수 있고

브라우저에서 http://localhost:3000/images/logo.jpg(또는 실제 도메인 이름, 배포되면!) 경로로 해당 파일을 오픈할 수 있습니다.

---

리액트에서 임포트한 이미지는 어떻게 동작하나요?

import는 React가 처리하지 않는다는 것을 알아두세요.

 

그것들은 아마도 Webpack/ Vite일 당신의 번들러에 의해 처리됩니다. (Create React App을 사용하는 경우 확실히 Webpack입니다.) Webpack, Rollup, Parcel 및 기타 번들러는 모두 개념적으로 동일한 방식으로 동작합니다.

이미지나 CSS 파일과 같은 정적 파일을 가져올 때 번들러는 해당 파일을 그대로 export 위치에 복붙하지 않습니다.

대신 이 특정 JS 파일이 이 특정 이미지/CSS 파일/무엇이든 어딘가에 의존한다는 점을 기록합니다.

그런 다음 번들러는 생성된 고유 이름(예: a5c8d3f89cad.jpg)으로 이미지를 output 디렉토리에 복사하고,

<img src={yourName}/>을 <img src="a5c8d3f89cad.jpg"로 대체합니다. />.

이미지가 특히 작은 경우 Webpack은 최적화를 위해 이를 JS 번들에 인라인하기로 결정할 수도 있습니다.

이 모든 것은 당신이 걱정할 필요 없이 일어나는 일입니다.

---

리액트에서 img 태그를 사용하는 최고의 방법은 무엇일까요?

컴포넌트와 관련된 일회성 이미지의 경우 import를 선호합니다.

가져온 이미지 파일이 없으면 빌드가 실패하고 오류를 빠르게 찾을 수 있다는 부수적인 이점이 있습니다!

그렇기 때문에 이미지를 사용하게 된다면 임포트하는 쪽을 선호합니다.

일반적인 이미지 경우 또는 수동으로 가져오기가 귀찮은 경우 퍼블릭으로 올릴 것입니다.

• React 앱이 전체 사이트의 작은 부분일 때
• 동일한 이미지가 React와 다른 비-React 페이지에서 모두 사용되어야 할 때
• CDN을 통해야 할 때

이 경우 이미지 중복을 피하고 싶습니다.

복사본이 동기화되지 않을 가능성이 있기 때문입니다.

---

import를 디폴트로 사용하는 것을 추천하는 이유

Creact React App공식문서는 해당 내용을 직접 다루고 있습니다.

반응형

기본적으로 프론트엔드 리소스는 에셋 / 퍼블릭 두 가지 타입으로 나눌 수 있습니다.

• 에셋(asset aka resource) : 번들러에 의해 처리되어 js 파일내로 임포트 됩니다.
• 퍼블릭 (에셋 / 리소스) : 절대 경로를 통해 url을 참조합니다.

에셋의 장점은 다음과 같습니다.

• 추가 네트워크 요청을 피하기 위해 스크립트와 스타일시트가 전처리되어 번들링 됩니다.
  • 트리셰이킹, css 퍼지 등의 최적화가 가능합니다.
• 누락된 파일은 사용자에게 404 오류 대신 컴파일 오류를 발생시킵니다.
  • 배포 전에 오류를 쉽게 발견할 수 있습니다.
• 결과 파일 이름에는 콘텐츠 해시가 포함되므로 브라우저가 이전 버전을 캐싱하는 것에 대해 걱정할 필요가 없습니다.

즉, 기본적으로 앱에 포함되는 리소스는 에셋 형태로 번들링 하는 것이 좋습니다.

 

public 에셋을 사용한다는 것은 하나의 모듈 시스템의 탈출구(escape hatch)로 볼 수 있습니다.

따라서 위험을 감수하는 것은 우리의 몫입니다.

• 퍼블릭 폴더의 어떤 파일도 전처리되거나 최적화되지 않습니다.
• 파일이 누락되어도 해당 파일은 컴파일 시간에 호출되지 않기에, 사용자에게 404 오류가 발생할 수 있습니다.
• 파일 이름에 콘텐츠 해시가 포함되지 않으므로 해당 파일이 변경될 때마다 (소스에서) 쿼리 인수를 추가하거나 해당파일의 이름을 바꿔야 합니다.

보통 public을 사용하는 경우는 CDN 때문인 경우가 많습니다.
build후 public 폴더를 들어서 옮기죠