[ React ] PJ. Props Children 을 활용한 레이아웃 구조 개선

무인양품 사이트의 헤더 하단 콘텐츠는 고정된 넓이값 내에 aside 탭과 각 페이지별 콘텐츠를 렌더링 하는 방식 으로 제작되어 있다.

그렇기 때문에 저희 무지막지팀 역시 같은 방식으로 고정된 width값 내에 콘텐츠를 담는 방향으로 기획했다.

그러기 위해서는 aside와 각 페이지의 콘텐츠를 담을 하나의 Container가 필요했고, 해당 Container의 레이아웃을 통해 항상 같은위치에 렌더링할 필요가 있었다.

하지만 각각의 페이지 컴포넌트에 aside를 함께 담아 라우터 컴포넌트에서 라우팅할 경우, 페이지에 상관없이 같은 형태를 지니고 있는 aside가 불필요하게 새롭게 렌더링되어 표현되는 비효율성을 고려해야 했다.

따라서 라우터 컴포넌트내에서 div태그를 사용해 aside 컴포넌트와 각각의 페이지 컴포넌트를 감싸고 common.scss를 통해 레이아웃을 잡아주는 방식으로 진행했다.

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <div className="mainContainer">
        <Aside />
        <Routes>
          <Route path="/cart" element={<Cart />} />
          <Route path="/detail/:id" element={<Detail />} />
          <Route path="products/categories" element={<List />} />
          <Route path="products/categories/:id/types" element={<Gender />} />
          <Route path="/" element={<Landing />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

하지만,

라우터 컴포넌트 내에 컴포넌트가 아닌 다른 요소가 들어가고 common.scss로 레이아웃을 잡는 구조가 좋지 못하다고 판단해 children 을 통해 다음과 같이 라우터의 구조를 개선하였다.

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <MainContainer>
        <Aside />
        <ContentsWrapper>
          <Routes>
            <Route path="/cart" element={<Cart />} />
            <Route path="/detail/:id" element={<Detail />} />
            <Route path="products/categories" element={<List />} />
            <Route path="products/categories/:id/types" element={<Gender />} />
            <Route path="/" element={<Landing />} />
          </Routes>
        </ContentsWrapper>
      </MainContainer>
    </BrowserRouter>
  );
};

aside 와 페이지 콘텐츠가 렌더링될 넓이 값 과 레이아웃을 적용할 MainContainer, aside영역을 제외한 영역의 넓이값을 적용할 ContentsWrapper 컴포넌트를 생성해 해당 컴포넌트의 children으로 aside와 각 페이지 컴포넌트를 입력해 주었다.

다음과 같은 구조 변경으로 라우터의 구조를 개선함과 함께 라우터자체에 레이아웃을 적용하지 않고도 컴포넌트를 자유롭게 배치할 수 있었다.