10. 동적 HTML Attributes(속성) 설정 & 이미지 파일 로딩

• 프로젝트 링크

• 동적 HTML Attributes(속성) 설정 & 이미지 파일 로딩

  • <img src="src/assets/react-core-concepts.png" alt="React logo" /> 이런식의 src 정의 방식은 최적의 방법은 아님 // 리액트 작업물을 배포할 때 이미지가 사라질 수도 있다.
    배포 과정에서 모든 코드가 변환 및 최적화되고 함께 묶여지는데, 묶여지는 과정에서 이와 같이 로딩된 이미지 파일이 무시될 수 있고, 배포 과정에서 유실될 수도 있다.
    또한 이런 방식으로는 여러 추가적인 최적화 단계를 사용할 수 없다.

  • import를 사용해 이미지 파일을 로딩하는 방식은 더 좋은 방법이다.
    import를 사용하면 이미지 파일이 최적화 과정에서 무시되지 않고, 최적화 단계에서 이미지 파일을 최적화할 수 있다.

  import reactImg from './assets/react-core-concepts.png';
  const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
  
  function Header() {
    const description = reactDescriptions[genRandomInt(reactDescriptions.length - 1)]
    return (
      <header>
        <img src={reactImg} alt="React logo" />
        <h1>React Essentials</h1>
        <p>
          {description}
        </p>
      </header>
    );
  }
  
  function App() {
    return (
      <Header/>
    )
  }
  
  export default App;