[MernStack] Blog 만들기 15. [React] Navigator 작업

components/AppNavbar.js 생성을 한다.

[AppNavbar.js ]

import React, { Fragment } from 'react';
import {Navbar, Container} from 'reactstrap';
import { Link } from "react-router-dom";
// 크롬확장자 page Ruler Redux설치하여 웹의 픽셀을 구할 수 있다.
const AppNavbar = () =>{
    return(
        <Fragment>
    <Navbar>
        <Container>
            <Link to="/" className="">
                Side Project's Blog(Wuny)
            </Link>
        </Container>
    </Navbar>
</Fragment>
    )
}

export default AppNavbar;

• <Link to ="/" className="">  에서 to는 어디로 이동할지를 나타낸다.
  LInk to의 "/" 는 홈으로 가게한다.
  그 다음 className을 적어 줄것인데 우선 잘 작동하는지 테스트를 위해 아무것도 작성하지 않는다.
  (아래서 작성함)
  
  //크롬 확장도구인 Page Ruler Redux 를 설치하면 웹사이트의 컨테이너 픽셀을 구할 수 있다.

[Routes/Router.js]

const MyRoter = () => (
  <Fragment> 
    <AppNavbar/>
      <Header/>
      <h2>Hello Body</h2>
      <Footer/>
  </Fragment>  
);

 

위에서 우리가 작성한 AppNavbar를 Header위에 불러준다.

헤더위에 우리가 작성한 글씨가 보인다.
마우스를 가져가면 밑줄이 생겨 하이퍼 링크가 생긴걸 알 수 가 있다.
우린 디자인상 밑줄을 안보이게 작업하겠다.

[AppNavbar.js ]

import React, { Fragment } from 'react';
import {Navbar, Container, NavbarToggler, Col, Collapse, Nav} from 'reactstrap';
import { Link } from "react-router-dom";
// 크롬확장자 page Ruler Redux설치하여 웹의 픽셀을 구할 수 있다.
const AppNavbar = () =>{
    return(
        <Fragment>
    <Navbar color="dark" dark expand="lg" className="sticky-top">
        <Container>
            <Link to="/" className="text-white text-decoration-none">
                Side Project's Blog(Wuny)
            </Link>
            <NavbarToggler/>
            <Collapse isOpen={true} navbar>
                <Nav className="ml-auto d-flex justify-content-around" navbar>
                //ml : 왼쪽 마진.. margin left
                {true ? <h1 className="text-white">authLink</h1> : <h1 className="text-white">guestLink</h1>}
                </Nav>
            </Collapse>
        </Container>
    </Navbar>
</Fragment>
    )
}

export default AppNavbar;

Container태그의 ClassName을 text-white text-decoration-none 으로 설정해준다.
NavbarToggler라는 것을 달아준다.

Toggler는 창을 최소화 하였을시(또는 모바일) 네비게이션 메뉴들이 아래 사진의 세줄메뉴 버튼으로 합쳐져
저 버튼을 누르면(Collapse) 네비게이션 메뉴들이 나오것을 말한다.

Collapse태그가 방금 말한 버튼을 나오면 네베게이션이 나오게 해준다.

 

<Collapse isOpen={true} navbar>
상태를 기본값으로 true로 설정한다.

{true ? <h1 className="text-white">authLink</h1> : <h1 className="text-white">guestLink</h1>}
만약 Collapse가  true이면 <h1 className="text-white">authLink</h1> 가 출력되고
false이면  <h1 className="text-white">guestLink</h1>가 출력이 된다.

우린 true로 박아뒀기에 authLink가 나오는 걸 볼 수 있다.

화면 사이즈를 줄였을시 NavbarToggler로 바뀐다.

 

<Nav className="ml-auto d-flex justify-content-around" navbar>를 보면 d-flex라는 것을 사용했는데
flexbox를 의미한다.
flexbox는 레이아웃을 배치를 좀 더 쉽게 하기위해 사용되는 것이다.
자세한 내용은 클릭

Flexbox - Web 개발 학습하기 | MDN

부트스트랩 flexbox 사용법 클릭

Flex

---