Material UI에는 Image 컴포넌트가 있나요?
React 컴포넌트에 익숙하다면 다른 라이브러리들이 일반적으로 자체적인 Image 컴포넌트를 제공하는 것을 알 수 있습니다. 그러나 Material-UI에서는 약간 다릅니다. Material-UI에서 이미지를 처리하는 다양한 방법을 살펴보겠습니다.
CardMedia API 사용하기
Material-UI에서 이미지를 표시하는 한 가지 방법은 CardMedia 컴포넌트를 사용하는 것입니다. 그러나, CardMedia는 Card 컴포넌트의 context 내에서 사용되어야 함에 유의해야 합니다.
<span class="token keyword">import</span> <span class="token punctuation">{ Card, CardMedia }</span> <span class="token keyword">from</span> <span class="token string">'@mui/material'</span>;
<span class="token comment">// ...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Card</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>CardMedia</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"img"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"The house from the offer."</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&w=350&dpr=2"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>CardMedia</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Card</span></span><span class="token punctuation">></span></span>
HTML img 태그 사용하기
보다 직관적인 방법을 선호하고 HTML img 태그를 사용하려면, Material-UI에서 다른 래퍼 컴포넌트를 사용할 수 있습니다.
<span class="token keyword">import</span> <span class="token punctuation">{ Paper }</span> <span class="token keyword">from</span> <span class="token string">'@mui/material'</span>;
<span class="token comment">// ...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Paper</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"outlined"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"url"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Paper</span></span><span class="token punctuation">></span></span>
mui-image 패키지 사용하기
다른 선택지로는 mui-image 패키지를 사용하는 것입니다. mui-image 패키지는 특별히 Material-UI 통합을 위해 설계된 이미지 컴포넌트를 제공합니다.
<span class="token keyword">import</span> <span class="token punctuation">{ Image }</span> <span class="token keyword">from</span> <span class="token string">'material-ui-image'</span>;
<span class="token comment">// ...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Image</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"image/src/"</span></span> <span class="token punctuation">/></span></span>
제3자 이미지 컴포넌트
Material-UI 자체적으로 특정 Image 컴포넌트를 제공하지는 않지만, 제3자 옵션을 사용할 수 있습니다. 두 가지 옵션은 mui-image와 mui-image입니다. 그러나, Material-UI는 이미지 로딩을 위해 Material 가이드라인과 일치하는 mui-image를 권장합니다.
<span class="token keyword">import</span> <span class="token punctuation">{ Image }</span> <span class="token keyword">from</span> <span class="token string">'mui-image'</span>;
<span class="token comment">// ...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Image</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token string">"my-image.png"</span></span> <span class="token punctuation">/></span></span>
나만의 Img 컴포넌트 만들기
더 많은 제어와 유연성을 원하면, Material-UI의 Box 컴포넌트를 시작으로 자신만의 커스텀 Img 컴포넌트를 생성할 수 있습니다.
<span class="token keyword">import</span> <span class="token punctuation">{ Box, BoxProps }</span> <span class="token keyword">from</span> <span class="token string">"@mui/material"</span>;
<span class="token keyword">type</span> ImgProps <span class="token operator">=</span> <span class="token punctuation">{</span>
alt<span class="token operator">:</span> <span class="token string">string</span><span class="token punctuation">;</span>
src<span class="token operator">:</span> <span class="token string">string</span><span class="token punctuation">;</span>
<span class="token comment">// 필요한 HTML img 속성 추가</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> Img <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token punctuation">BoxProps</span> <span class="token operator">&</span> ImgProps<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>Box component<span class="token operator">=</span><span class="token string">'img'</span> <span class="token punctuation">...</span>props <span class="token operator">/></span><span class="token punctuation">;</span>
보시다시피, Material-UI에서 이미지를 처리하기 위해 다양한 방법을 사용할 수 있습니다. 요구사항과 프로젝트에 가장 적합한 방법을 선택하세요. 즐거운 코딩되세요!
