gatsby의 이미지 컴포넌트 비교(StaticImage, GatsbyImage)

 

당신이 인용한 내용은 이미지를 다룰 때 Gatsby에서 사용되는 두 가지 주요 이미지 컴포넌트인 `StaticImage`와 `GatsbyImage`에 대한 설명입니다.

1. StaticImage

   - `StaticImage`는 이미지가 컴포넌트를 사용할 때마다 항상 동일한 경우에 사용됩니다.
   - 예를 들어, 사이트 로고나 인덱스 페이지의 주요 이미지 같이 변경되지 않는 이미지에 적합합니다.
   - 이 컴포넌트를 사용하면 Gatsby는 이미지를 최적화하고 필요한 포맷 및 크기로 변환합니다. 이는 성능을 향상시키고 페이지 로딩 시간을 줄일 수 있습니다.

 

// ⚠️ 이렇게 Props로 내려서 사용할 수 없습니다

export function Logo({ logo }) {
  // You can't use a prop passed into the parent component
  return <StaticImage src={logo} />
}

// ⚠️ 동적으로 변하는 넓이에서 동작하지 않습니다

export function Dino() {
  // Props can't come from function calls
  const width = getTheWidthFromSomewhere()
  return <StaticImage src="trex.png" width={width} />
}

// 이런식으로 고정된 넓이에서 사용 가능합니다
export function Dino() {
  // Local variables are fine
  const width = 300
  return <StaticImage src="trex.png" width={width} />
}

 

여기서 주의해야할 점은 css in js(emotion, styledComponent)가 적용이 안된다는 점 입니다.  그래서 아래와 같이 작성시 오류가 발생합니다.

// ⚠️ css in js 사용시 동작안됨

const AwesomeImage = styled(StaticImage)`
  border: 4px green dashed;
`

export function Dino() {
  // Parser doesn't know that this is a StaticImage
  return <AwesomeImage src="trex.png" />
}

만약 스타일을 적용하고 싶다면 style 이나 className을 props로 사용하면 됩니다. 만약 <img>태그의 스타일이 필요하다면 imgSLtyle(CSSProperties)이나 imgClassName(string)을 사용할 수 있습니다.

2. GatsbyImage

   - `GatsbyImage`는 이미지가 컴포넌트에 프롭으로 전달되거나 다른 방식으로 이미지가 변경될 때 사용됩니다.
   - 예를 들어, 블로그 글의 주요 이미지나 작성자 아바타와 같이 컴포넌트가 사용될 때마다 다른 이미지를 표시해야 할 때 적합합니다.
   - 이 컴포넌트는 레이지 로딩(lazy loading), 이미지 재사용, 효율적인 이미지 로딩과 같은 기능을 제공하여 사용자 경험을 향상시킬 수 있습니다.

 

import * as React from 'react';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

// 아래와 같이 Props로 내려준 이미지를 보여주는데 사용합니다
const BlogPost = ({ title, featuredImage }) => {
  // 이미지 데이터를 가져오고 GatsbyImage컴포넌트로 이미지를 보여줍니다
  const image = getImage(featuredImage);

  return (
    <div>
      <h1>{title}</h1>
      <GatsbyImage image={image} alt="Blog Post Image" />
    </div>
  );
};

export default BlogPost;

 

옵션에 대해서 좀더 살펴보자면 formats와 loading 이 있습니다

import * as React from 'react';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

const BlogPost = ({ title, featuredImage }) => {
  const image = getImage(featuredImage);

  return (
    <div>
      <h1>{title}</h1>
      <GatsbyImage
        image={image}
        alt="Blog Post Image"
        formats={['auto', 'webp', 'avif']} // 어떤 포맷으로 이미지를 출력할지
        loading="eager" // eager일 경우 이미지를 즉시 보여줌, 'lazy'일 경우 사용자가 볼때만 로딩
      />
    </div>
  );
};

export default BlogPost;

 

• formats: formats 속성을 사용하여 이미지 포맷 옵션을 지정할 수 있습니다. 예제에서는 'auto', 'webp', 'avif' 포맷을 사용하도록 설정되어 있습니다.
• loading: loading 속성을 사용하여 이미지 로딩 옵션을 지정할 수 있습니다. 예제에서는 'eager'로 설정되어 있으며, 이는 페이지 로드 시 즉시 이미지를 로드하도록 지시하는 옵션입니다

 

요약하면, `StaticImage`는 변하지 않는 이미지에 사용되며 Gatsby가 이미지를 최적화하여 성능을 개선합니다. 반면에 `GatsbyImage`는 이미지가 변경될 때 사용되며 레이지 로딩 및 효율적인 이미지 처리와 같은 기능을 제공하여 동적인 이미지 표시에 적합합니다.

 

추가적으로 디테일한 옵션사항 등 더 궁금한사항은 아래 공식문서에서 확인하실 수 있습니다

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/

Gatsby Image plugin | Gatsby

 

 

감사합니다