[Toy Project] Navigation Header 만들기

기존에 Vue로 작성했던 프로젝트를 비슷하게 만들어보기 위해 쉬워보이는 Navigation Header부터 제작했다.

 

목표

로고 정의

로고는 나중에 Footer에서도 사용하는 등 재활용의 가능성이 있어 Styled Component로 제작하였다.

scss 문법을 지원하므로 위와 같이 작성해주었다.

Styled Component는 기본적으로 존재하는 태그나 사용자 정의 태그를 새롭게 정의하여 사용하는 방식이다.

npm i styled-components

import styled from 'styled-components'

const 새로운태그명1 = styled.기본적인태그명`
	style 요소
`

const 새로운태그명2 = styled(사용자정의태그명)`
	style 요소
`

그리고 새로운 태그명을 이용해 HTML을 구성해주면 된다.

결과

네비게이션 바 정의

네비게이션 바 같은 경우는 Bootstrap을 이용하여 작성했었다.

npm i react-bootstrap bootstrap

Vue.js에서는 bootstrap을 main.scss에 정의하고, 그것을 바탕으로 새롭게 사용자 지정 색상을 정의할 수 있었다.

[Vue.js] 영화 검색 사이트 예제 - 02. BootStrap 구성 (tistory.com)

[Vue.js] 영화 검색 사이트 예제 - 02. BootStrap 구성

그런데 React에서는 기본적으로 Bootstrap을 적용하기 위해서는 root경로의 index.js에 다음과 같이 정의를 한다.

import 'bootstrap/dist/css/bootstrap.css';

근데 이러면 사용자 정의 색상을 지정할 수 없으므로 다른 방법을 사용했다.

 

React는 index.html의 <div id="root"></div>에 index.js가 연결되고

index.js에서는 App.js를 import하여 <App /> 컴포넌트를 브라우저에 띄우는 방식을 채택한다.

 

따라서 index.js에 Bootstrap을 import한 scss파일을 연결하면 Bootstrap이 연결된다.

App.scss

index.js

네비게이션 헤더 또한 Styled Components로 작성해보았다.

처음에 styled Component로 NavLink를 대체했었는데, display:flex 속성을 사용하기가 애매해져서 ul 태그를 대체했다.

Navs and tabs · Bootstrap v5.1 (getbootstrap.com)

Navs and tabs

결과

Header 컴포넌트 정의

사실 styled Component 방식으로만 컴포넌트를 정의하기도 했고, Vue에서도 컴포넌트 자체에 style을 넣다보니

이 방법 외에는 어떻게 css를 적용하는지 아직 습득하지 못했다.

이 방법을 사용하면 장점은 파일들 관리가 깔끔해지고 각 컴포넌트의 css 영역을 침범하지 않는다는 장점이 있는데

단점은 이렇게 만든 컴포넌트들을 부모 컴포넌트에서 다루기가 어렵다.

 

오늘 겪은 일로는 Logo와 Links 사이에 약 10px 정도의 여백을 주고싶었는데

저 위의 style 영역에 Logo { margin-right: 10px; } 를 넣어도 반응하지를 않았다.

왜 그런지는 더 찾아봐야 할 것 같다.

 

결과

React

Vue로 작성했던 코드를 보면서 작업한 게 아니라서 style들이 차이가 조금씩 난다.. ㅠㅠㅠ