[LOLPAGO] React 설치 및 Header 구성(2)

🚕 Header 구성

페이지의 가장 위에 위치할 Header를 구성하려고 한다.

 

리액트의 장점이 모든 버튼, 링크, 체크박스 등을 컴포넌트화 한다는 것에 있으므로 마찬가지로 컴포넌트화하여 진행한다.

 

파일 구조에서 실제 컴포넌트들은 src폴더 안에 위치하게 된다.

 

아래와 같이 Header.jsx를 구성해주었다.

 

 

Header를 구성하기 전 리액트가 실행되는 순서를 알고 있어야 한다.

 

즉, 화면을 만드는 흐름을 알아야 하는데 아래의 링크를 통해서 화면을 만드는 흐름을 확인할 수 있다.

 

https://2t-hong.tistory.com/169

[React] 화면이 실행되는 방법의 이해

 

리액트가 실행되는 순서를 알고 있어야 하는 이유는 가장 처음에 사용자가 보게 되는 화면에 Header가 존재하도록 해야하기 때문이다.

 

위의 링크의 내용을 읽고 왔다면 App.js에 Header부분에 Header를 적용해주면 된다는 것을 알았을 것이다.

 

Header.jsx파일을 작성하면 되겠다.

 

 

 

 

🚓SVG파일 로고

일단 로고를 띄우는 것을 목표로 Header를 작성해보겠다.

 

이미지 파일들은 보통 src의 assets안에 저장이 된다.

 

웹에서는 대부분 svg파일들을 사용하게 되는데 svg파일을 사용하는 이유는 아래와 같다.

 

1. 파일의 크기가 작다.

2. 웹 로딩이 빠르다.

3. 확대하더라도 이미지가 깨지지 않는다.

 

다양한 이유가 있겠지만 위의 세 가지 이유가 가장 크다.

 

그렇다면 이미지를 어떻게 svg파일로 변경할 수 있을까?

 

imageMagick을 이용하면  png파일을 svg파일로 변경할 수 있다.

 

설치 방법은 아래를 참고해라.

 

https://2t-hong.tistory.com/171

[React] PNG파일을 SVG파일로 변경하는 방법

 

나는  다음 이미지를 SVG파일로 만들어서 로고로 생성하려고 한다.

 

 

 

이미지를 내보내기 위해서는 images폴더 안에도 역시 index.js파일이 필수다.

 

이미지의 이름을 LOGO라고 설정할 것이기 때문에 다음과 같이 작성하면 된다.

 

 

 

 

사진과 같이 LOLPAGO.svg파일을 assets\images 폴더에 생성한 뒤 index.js에 다음과 같이 입력한다.

 

이후 Header.jsx에 export했던 LOGO를 import해준다.

 

그리고 App.js에 뚝딱 하면 될 줄 알았지만 오류가 발생한다.

 

다음에 해결해보도록 하자.

 

더하여 BrowserRouter에 대해서도 다음에 확인해보도록 하겠다.