> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/styled-component/undefined-2.md).

# 반응형 스타일 관리

* 중단점(breakpoints)이 설정된 JavaScript 객체 정의
* CSS 미디어 쿼리를 사용해 각 중단점에 대한 장치(device) 정의
* 스타일 컴포넌트에서 중단점이 설정된 객체를 가져와 활용

## 1. 중단점/장치 구성 설정

반응 스타일 환경설정 파일(`src/config/responsiveConfig.js`)을 만든 후, 다음과 같이 중단점(breakpoint)과 장치(device)를 구성한다. 

중단점 설계(design)는 프로젝트 또는 상황에 따라 변동될 수 있다.  

```javascript
// 중단점
const breakpoint = {
  mobileS: 320,
  mobileM: 375,
  mobleL: 425,
  tablet: 768,
  laptop: 1024,
  laptopL: 1440,
  desktop: 2560,
};

// 장치
export const device = {
  mobileS: `(min-width: ${breakpoint.mobileS}px)`,
  mobileM: `(min-width: ${breakpoint.mobileM}px)`,
  mobleL: `(min-width: ${breakpoint.mobleL}px)`,
  tablet: `(min-width: ${breakpoint.tablet}px)`,
  laptop: `(min-width: ${breakpoint.laptop}px)`,
  laptopL: `(min-width: ${breakpoint.laptopL}px)`,
  desktop: `(min-width: ${breakpoint.desktop}px)`,
};
```

## 2. 스타일 컴포넌트 설정

반응형 스타일 구성 파일을 호출한 후, 장치(device) 객체의 속성 중 하나를 가져와 CSS 미디어 쿼리의 값으로 설정할 수 있다. 

```javascript
// 반응형 스타일 구성 파일에서 장치 정보 호출
import { device } from '@config/responsiveConfig';

// 스타일 컴포넌트
const StyledMain = styled.main`
  margin-top: 90px;
  max-width: 960px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;

  @media screen and ${device.tablet} {
    margin-left: auto;
    margin-right: auto;
  }
`;
```

## 3. 오류 

{% hint style="warning" %}

### 오류가 발생하는데.. 문제가 있는 거 아닌가요?

`expectedts-styled-plugin(9999)` 오류가 발생했음을 VS Code에서 보여주는데 컴파일 상에서는 문제가 없습니다. 이 문제는 설치된 vscode-styled-components 확장이 의존하는 [typescript-styled-plugin 확장에서 문제 원인이 있는 것으로 파악](https://github.com/microsoft/typescript-styled-plugin/issues/74)됩니다. vscode-styled-components 확장을 '사용 안함'으로 설정하면 오류는 더 이상 표시되지 않습니다. mjbvz는 이 [문제를 해결할 수 있도록 코드 수정을 요청 (opens new window)](https://github.com/microsoft/typescript-styled-plugin/commit/b17aa81653a1afe4e3dca0717757f5e0487001d7)했으나 아직 받아들여지지 않아 미해결 상태입니다. 다소 오류가 거슬리더라도... 현재로선 무시해야 할 듯합니다.
{% endhint %}

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MWbTRh_GVIyKP6XhNOR%2F-MWbTyy2b22pRYvTPotI%2Fimage.png?alt=media\&token=c6ff6184-dad7-4b49-b7c7-476de748e0b2)