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;
이렇게 바꾸니 되더라... ㅠㅠㅠㅠ
글로벌 스타일을 감싸는 형태가 아닌 위에서만 선언하는 형태로 넣었다. 감싸는 형태로 하다보니 불필요한 부분에도 스타일이 적용되어 렌더가 되지 않은 것 같다.