Styled Component로 반응형 구축하기
2020. 5. 21.
반응형을 하려면 매번 @media (min-width: 770px) {}을 써줘야 한다. 하지만 만약 이걸 써야하는 컴포넌트가 엄청 많고, 한 컴포넌트 안에서도 내용이 많다면 이를 하나하나 치기에 번거롭고, 치다가 오타가 나서 이를 찾는데 오래 걸릴 수 있다. 따라서 전역에서 사용가능한 theme.js를 만들어 주는 것이 편하다. src > style > theme.js 어느 width에서 바뀔 것인지에 대한 break-point가 될 size에 정의해두고, theme안에 해당 사이즈로 @media안에 들어갈 내용을 정의해준다. 그 다음, 만들어진 theme.js를 전역에서 사용가능하게 index.js(혹은 메인)에 감싸준다. import { ThemeProvider } from "styled-compo..