142. "헤더" 컴포넌트 추가하기

내장 css 모듈 지원을 사용할 예정이기 때문에 Header.module.css 라는 형식으로 css 이름을 작성한다. 

create-react-app으로 만든 모던 리액트 프로젝트에서는 설정이 제공되지 않습니다 따라서 이 css 파일이 필요합니다 (?)

 

Header.module.css 파일은 그대로 복사 완료

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background-color: #8a2b06;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.main-image {
  width: 100%;
  height: 25rem;
  z-index: 0;
  overflow: hidden;
}

.main-image img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem);
}

 

 

Header.js 에서 Wrapper로 이용하기 위한 Fragment 사용

그리고 img 파일들을 넣기 위한 폴더를 'asset' 생성

 

React에서는 img 파일을 어떻게 삽입해야 할까?

HTML 코드처럼 경로를 바로 작성하는 것이 아니라 import를 해야 한다.   

 

아래와 같은 코드를 사용할 수 있다
처음에는 어색한 것 같지만 사실 간단한 코드이다. 그저 어색할 뿐!

import {Fragment} from 'react';
import headerImg from '../../assets/meals.jpg';
const Header = props => {
  return <Fragment>
    <header>
      <h1>React Meals</h1>
      <button>Cart</button>
    </header>
    <div>
      <img src={headerImg} alt="" />
    </div>
  </Fragment>
}

export default Header;

 

그리고 내부에서는 임포트하면 완성된 애플리케이션에 이미지가 포함하도록 변환된다

애플리케이션은 서버에 배포하여 해당 이미지에 대한 링크를 만들 수 있다. 그 링크는 만들어진 코드에

동적으로 삽입된다 즉 내부적으로는 여러 가지 일들이 일어나는 것이다

이미지를 import 할 때는 css처럼 확장자를 정확하게 작성해야 한다.

 

로컬 이미지의 경우 import 해서 사용하지만, url과 같이 서버에 있는 이미지라면 경로를 그냥 아래와 같이 작성하면 된다.

 

이런 화면으로 완성