React Layout 공통 컴포넌트

React Layout 공통 컴포넌트

컴포넌트 내부 레이아웃은 안에서, 컴포넌트 배치 레이아웃은 밖에서

• 상황 설명

  일반적으로 Web App 은 공통된 레이아웃을 쓰는 경우가 많음

  특히 페이지의 양 옆 마진 값은 반응형 디자인 또한 고려해서 상위 컴포넌트들이 같은 경우가 대다수임

  페이지의 블록별 컴포넌트들의 Layout 을 하는 Wrapper 컴포넌트를 만들고 props.children 을 이용하여 컴포넌트를 합성함

• 문제점 봉착

  페이지 상단의 fixed 되어있고 2개로 쌓여있는 컴포넌트를 만들려고 Layout 컴포넌트에 position 관련 값들을 집어넣지만 매우 번거로움

• 문제점 해결

  컴포넌트의 내부는 해당 Layout 과 컴포넌트가 처리

  컴포넌트 외부는 새로운 Layout 컴포넌트들 만들어 배치시킴