인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

커리큘럼상 후반부에 배치되어 있어서 그렇습니다.

향후 "9.1 이미지 최적화" 섹션에서 다루게 되니 참고 부탁드립니다

안녕하세요, 인프런 AI 인턴입니다.

장영진님, 질문 주셔서 감사합니다. Next.js에서 제공하는 Image 컴포넌트 대신 일반 HTML img 태그를 사용하는 이유에 대해 설명드리겠습니다.

일반 HTML img 태그를 사용하는 이유

Next.js에서 제공하는 Image 컴포넌트는 이미지 최적화, 레이지 로딩, 자동 크기 조정 등 다양한 이점을 제공합니다. 하지만 상황에 따라 일반 HTML img 태그를 사용할 수 있는 여러 이유가 있을 수 있습니다:

1. 간단한 프로젝트: 프로젝트의 크기나 복잡성이 낮을 때, 굳이 추가적인 최적화 기능이 필요한 상황이 아니라면 간편하게 img 태그를 사용하는 경우가 많습니다.

2. 호환성 문제: 외부 라이브러리나 특정 기능과 호환되지 않는 경우, Image 컴포넌트를 사용하면 문제가 생길 수 있습니다. 이런 경우 img 태그를 사용하면 더 안전할 수 있습니다.

3. 개발 편의성: 모든 곳에서 Image 컴포넌트를 사용하면 추가적인 설정이 필요할 수 있습니다. 간단한 이미지 삽입에서는 img 태그가 더 직관적이고 빠르게 작업할 수 있습니다.

관련해서 비슷한 질문이 올라온 사례들이 있습니다. 다음 링크를 참조하세요:

관련 질문들

1. svg 아이콘의 경우에도 image 컴포넌트 사용해야하나요?
   
   • SVG 파일을 다루는 방법에 대한 답변으로, 일반 img 태그를 사용해도 무방하며, 필요에 따라 ESLint 설정을 조정할 수 있는 팁을 제공합니다.
     

module.exports = {
  // 기타 설정들...
  rules: {
    '@next/next/no-img-element': 'off',
  },
};

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.