class200ok | day2

styled component를 사용하려고 글로벌 스타일.js를 적용했다. 그리고 다른 컴포넌트에 적용하려니 렌더링이 되지 않는다?
개발자 도구를 켜보니 글로벌스타일.js는 실행하고 있는데 구현하고 있는 컴포넌트가 실행이 되질 않는다.

아래가 컴포넌트로 짠 내용인데 이 부분이 화면에서 렌더되질 않아서 고민을 했다.

export default function Nav() {
  return (
    <NavBox>
      <nav>
        <NavUpperBox>
          <img src="/images/class200ok-logo.png" className="logo" />
          <SpanText className="creatorCenter">
            <Link to="/creator">크리에이터 센터</Link>
          </SpanText>
        </NavUpperBox>
    </NavBox>
  );
}

도저히 풀리지 않아 동기분께 물어봤고 가장 위에 연결된 컴포넌트가 잘못되어 스타일이 적용되지 않는다는걸 알아냈다.

export class Routes extends Component {
  render() {
    return (
      <Fragment>
        <GlobalStyle>
          <Router>
            <Switch>
              <Route exact path="/login" component={Login} />
            </Switch>
          </Router>
        </GlobalStyle>
      </Fragment>
    );
  }
}

export default Routes;

export class Routes extends Component {
  render() {
    return (
      <Fragment>
        <GlobalStyle />
          <Router>
            <Switch>
              <Route exact path="/login" component={Login} />
            </Switch>
          </Router>
      </Fragment>
    );
  }
}

export default Routes;

이렇게 바꾸니 되더라... ㅠㅠㅠㅠ

글로벌 스타일을 감싸는 형태가 아닌 위에서만 선언하는 형태로 넣었다. 감싸는 형태로 하다보니 불필요한 부분에도 스타일이 적용되어 렌더가 되지 않은 것 같다.