Edwin-Blog (4) - Main 컴포넌트 (2) NavBar div

Edwin·2023년 6월 6일

edwinblog

목록 보기

5/5

코드컨벤션

div에서 div의 깊이를 설정하는 부분에 있어서 코드컨벤션이 필요해보였다. ChatGPT는 깊이에 대한 컴포넌트 네이밍 규칙은 개발자들 사이에 다소 주관적인 요소가 있다고 한다. 그럼에도 일관성을 유지하면서 가독성이 좋은 네이밍을 사용하는 것은 좋다고 한다.

01 OutLine: 최상위 컨테이너 또는 전체 레이아웃을 담당하는 컴포넌트
02 Container: OutLine 내부에서 레이아웃을 구성하는 컨테이너
03 InnerWrap: Container 내부에서 콘텐츠를 감싸는 컨테이너
04 Inner: InnerWrap 내부에서 구체적인 콘텐츠를 담당하는 컴포넌트
05 Content : Inner 내부에서 구체적인 콘텐츠를 표시하는 컴포넌트

01 NavOutLine
02 NavContainer
03 NavInnerWrap
04 NavInner
05 NavContent

01 NavOutLine

const Container = styled.div`
  width: 100vw;
  height: 100%;
  position: relative;
  display: flex;
  flex: 1 1 0;
`

NavOutLine는 추후에 다룰 MainBody(추후 이름을 변경할 예정, SectionOutLine)와 함께 Container에 속해 있다. display: flex에 따라서 안에 들어가는 요소는 flex로 인해서 선언된 너비내에서 row로 정렬된다. NavOutLine(width: 240px)와 MainBody(width: 100%)가 가로로 정렬된다.

const Test:React.FC = () => {
  return (
    <OutLine>
      <Container>
        <NavOutLine>테스트네비</NavOutLine>
        <MainBody>테스트섹션</MainBody>
      </Container>
    </OutLine>
  )
}

export default Test

const OutLine = styled.div`
  height: 100vh;
  overflow: hidden;
  position: relative;
`

const Container = styled.div`
  width: 100vw;
  height: 100%;
  position: relative;
  display: flex;
  flex: 1 1 0;
`

const NavOutLine = styled.div`
  flex-grow: 0;
  flex-shrink: 0;
  pointer-events: none;
  position: relative;
  z-index: 111;
  background-color: rgb(251, 251, 250);
  box-shadow: rgba(0, 0, 0, 0.024) -1px ;
  width: 240px;
`

const MainBody = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
`

위에는 큰 틀에서 정리한 Test 컴포넌트이다. 이런식으로 전체적인 레이이웃이 설정된 것이다.

그러나 발생된 질문은 이것이다. Flex 안에서의 아이템

Container : display: flex;
├── NavOutLine : width: 240px;
└── MainBody : width: 100%;

뭔가 이상하다. 기존의 지식으로는 Container가 100%(OutLine 컴포넌트, 100vw)이면, 내부의 요소들의 크기가 정확한 비율로 설정되야 한다고 생각했다. NavOutLine는 고정된 픽셀값이다. 반면에 MainBody는 Container 컴포넌트 너비를 기준으로 결정되는데, 100%는 NavOutLine : width: 240px를 제외한 나머지 공간을 차지하게 된다. 결과적으로 NavOutLine과 MainBody가 가로로 나란히 정렬되며, NavOutLine의 너비가 MainBody의 너비에 영향을 주지 않고 독립적으로 표시된다. 이는 추후에 동적으로 NavOutLine를 숨길 때, 남은너비 100%에 적용되게 만들어 놓을 수 있게 되는 것이다.

pointer-events: none;

해당컴포넌트에 선언된 해당 CSS 속성 가운데 하나를 알지 못했기에 새롭게 배우게 된다. pointer-events는 해당 태크에 대하서 이벤트를 발생시키지 않겠다는 선언이다. 특정 요소 위에 다른 요소를 겹쳐서 배치하고자 할 때, 겹쳐진 요소 위에 위치한 요소의 마우스 이벤트를 비활성화하기 위해 pointer-events: none;을 사용할 수 있으며, 이렇게 함으로 겹쳐진 요소 아래에 위치한 요소(해당 태그)의 마우스 이벤트가 활성화을 방지한다. 겹처진 요소 위에 요소(자녀 태그)의 이벤트만 실행한다.

Edwin

신학전공자의 개발자 도전기!!

이전 포스트

Edwin-Blog (4) - Main 컴포넌트 (2) NavBar div

edwinblog