Header Layout

프로젝트를 진행하며 레이아웃의 구현에 대한 큰 틀을 이해할 수 있었다. 기본적으로 페이지는 헤더와 바디로 구성되어 있다. 이번 글에서는 그 중 header파트에 대한 구현을 기록하려 한다.

 

프로젝트를 통틀어 Material-UI를 이용해 구현했다. 가장 상위 컴포넌트인 AppBar는 두개의 하위 컴포넌트로 이루어져 있다. 그것이 ToolBar와 Drawer이다. 둘은 같은 level에 존재하며 ToolBar가 코드의 윗 부분에 있다.

 

ToolBar는 화면의 가장 상단에 표시되며 drawer을 위한 햄버거, 사이트명, 유저의 간략한 정보등을 표시한다. 사이트 이름은 process.env를 통해 나타낼 수 있다.

 

ToolBar의 햄버거 아이콘의 클릭 여부에 따라 지정해놓은 state인 open이 결정되고 open이 true인 경우에 Drawer가 랜더링된다. Drawer 컴포넌트의 open props의 값에 따라 랜더링 여부가 결정되는 것이다. 또한 anchor prop을 통해 Drawer의 발생 방향이 결정된다.

 

메뉴구성은 다음과 같이 관리할 수 있다. 먼저 menus라는 객체 배열에 각 카테고리의 이름과 route를 담아준다. 그 후 map()매서드를 사용해 해당 route를 가진 list item link를 생성한 뒤 menuItems에 담아준다.

  const menus = [
    { primary: "대시보드", to: "/dashboard" },
    { primary: "데이터 확인", to: "/filesaved" },
    { primary: "데이터 요청", to: "/download" },
    { primary: "센서 정보", to: "/sensors" },
    { primary: "노이즈 이력", to: "/noises" },
  ];

  const menuItems = menus.map((menu, index) => {
    return <ListItemLink key={index} to={menu.to} primary={menu.primary} />;
  });