컴포넌트 만들기 (정적)

리액트는 SPA (싱글페이지어플리케이션!)  한페이지안에서 컴포넌트를 갈아끼우는 방법으로 화면을 출력해 주기 때문에
필요한 페이지들을 따로 만들지 않는다. 

페이지를 쪼개지 않으면 어마어마 하게 파일이 길어질거고 가독성이 떨어질 듯. 

원래 웹사이트를 만들때도 인클루드를 써서 레이아웃에서 가독성을 높이기도 하고 재사용성을 높이는데.. 비슷한 개념인듯.

 

그래서! header 를 쪼개본다.

 

아래쪽 } 밖으로 나와서  펑션으로 빼고

function Header(){
  return(
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <Nav>
            <Nav.Link href="#deets">More deets</Nav.Link>
            <Nav.Link eventKey={2} href="#memes">
              Dank memes
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

 

원래 저 코드가 있던 자리에는  함수(컴포넌트) 호출해 준다~

<div className="App">
      {/* 헤더 */}
      <Header></Header>