로고 구현하기

오늘 할 것

최상단 로고 구현, 검색창 구현

1. 최상단 로고 이미지 구현

과정

1. 로고 컴포넌트를 만들기 위해 Logo.js 파일을 생성한다.

2. 로고 컴포넌트 생성

import logo from "./assets/PokemonLogo.png";
function Logo() {
  return <img src={logo} alt="LOGO"></img>;
}
export default Logo;

로고 이미지 실행 결과

배운 점
1. 리액트에서 이미지 파일을 렌더링 하기 위해서는 src에다가 그냥 따옴표로 경로를 입력하는 것이 아니라 따로 import를 해주어야 한다.
2. 경로지정의 방법에는 상대경로와 절대경로가 있다.
/ = root
./ = 현재 위치
../ = 상위 경로
즉 현재 Logo.js 가 있는 위치에서 assets폴더의 PokemonLogo.png를 열어라
3. 리액트에서 img태그를 사용할 때, 반드시 alt 속성을 지정해 주어야 한다. 왜냐하면 이미지 렌더링 하는데 시간이 걸릴 수 있기 때문에 이미지를 불러오는 동안 alt로 여기에는 어떤 이미지가 들어간다 라는 것을 표현해 주어야 함.