Styled Component로 반응형 구축하기

반응형을 하려면 매번 @media (min-width: 770px) {}을 써줘야 한다. 

하지만 만약 이걸 써야하는 컴포넌트가 엄청 많고, 한 컴포넌트 안에서도 내용이 많다면 이를 하나하나 치기에 번거롭고, 치다가 오타가 나서 이를 찾는데 오래 걸릴 수 있다. 

 

따라서 전역에서 사용가능한 theme.js를 만들어 주는 것이 편하다. 

src > style > theme.js

theme.js

어느 width에서 바뀔 것인지에 대한 break-point가 될 size에 정의해두고, theme안에 해당 사이즈로 @media안에 들어갈 내용을 정의해준다. 

 

그 다음, 만들어진 theme.js를 전역에서 사용가능하게 index.js(혹은 메인)에 감싸준다. 

import { ThemeProvider } from "styled-components";
import theme from "./style/theme";

ReactDom.render(
    <ThemeProvider theme={theme}>
    	<Routes /> // Routes안에 Home이 있어서 여기에 감쌌다
    </ThemeProvider>
)

 

그 후, 반응형을 만들고 싶은 컴포넌트의 요소의 styled-component 안에 props로 받아서 바로 사용해주면 된다. 

컴포넌트.js