[MyDiary] Sidebar 사용으로 인한 렌더링 문제

문제 발견

Sidebar를 사용하면서 컴포넌트를 어떻게 렌더링 할지 고민에 빠지기 시작했다.

기존 상단 Navbar를 사용하면 Navbar 하단에 이어서 컴포넌트를 렌더링을 하면 되지만

Sidebar를 사용하게 되면서 렌더링 하는 방향이 상단부터 하단으로 내려오는 것이 아닌 좌측부터 우측으로 렌더링 하는 방향으로 바뀌었다.

 

문제 분석 및 원인

문제는 복잡할 것 없이 position : fixed를 사용하면서 Sidebar가 다른 요소들을 무시하고 브라우저 기준으로 렌더링 되면서 다른 요소들과 겹치게 되는 현상이 일어난 것이다.

즉, 다른 요소들과 Sidebar의 렌더링되는 공간이 같기 때문에 겹쳐지는 것이다.

문제 해결

1차 개선 코드

 

const App = () => {
  return (
    <Switch>
      <div style={{ textAlign:'center' }}>
        <Sidebar />
        <Route exact path="/" component={Mainpage}></Route>
        <Route exact path="/login" component={LogIn}></Route>
        <Route exact path="/signup" component={SignUp}></Route>
        <Route exact path="/calendar" component={Calendar}></Route>
        <Route exact path="/diary" component={Diary}></Route>
      </div>
    </Switch>
  );
};

export default App;

 

text-align : center를 사용해서 요소들을 가운데에 배치한다. 그러면 Viewport 가운데서 렌더링 하기때문에 Sidebar와 겹치지 않는다.

하지만 너무 조잡하다. textAlign이 요소를 가운데 정렬을 한다기 보단 말 그대로 Text를 가운데 정렬하는 것이고

만약 width가 큰 컴포넌트를 렌더링 해야한다면 Sidebar와 겹치게 되는 건 똑같다 결국 문제를 해결한 것이 아니였다.

 

최종 개선 코드

const App = () => {
  return (
    <Switch>
      <Route exact path="/login" component={LogIn}></Route>
      <Route exact path="/signup" component={SignUp}></Route>
      <Sidebar />
      <div style={{ padding: "80px" }}>
        <Route exact path="/" component={Mainpage}></Route>
        <Route exact path="/calendar" component={Calendar}></Route>
        <Route exact path="/diary" component={Diary}></Route>
      </div>
    </Switch>
  );
};

export default App;

 

2번째로 개선한 코드는 Sidebar의 width만큼 렌더링 되는 컴포넌트에 Padding을 줘서 겹치는 걸 막는 방법을 생각했다.

다시 말해 Sidebar와 렌더링 되는 컴포넌트와 같은 공간에서 렌더링 되는 것이 문제의 원인이다.

그렇다면 렌더링 되는 컴포넌트가 Sidebar의 width만큼 피해서 렌더링 하면 문제는 해결된다.