devlog

주로 사용하는 곳

SPA (Single Page Application)

단순 1페이지의 PR 사이트에 적용

mediaquery를 이용해서 가로 사이즈가 줄어듦에 따른 css 조정

react-responsive를 사용해서 가로 사이즈별로 다른 컴포넌트를 불러옴

html에 폰트사이즈를 10px로 주고 구현할때 rem단위 사용 -> 좀 더 쉬운 반응형 구현 가능

전체 폰트사이즈를 1씩 줄이고 늘림에 따라 세세하게 스타일을 고치지 않고 넓은 범위의 가로 사이즈에 대응 가능

경험

mo 또는 pc 버전을 완성시킨 후 가로 사이즈를 줄여나가면서 완전히 바뀌는 레이아웃만 새로 컴포넌트를 만들어 사용

Project 생성

npx create-react-app

Library

npm i react-router-dom
npm i styled-components
npm i react-responsive

Structure

src
├── App.js
├── device
│   ├── mo
│   │   ├── MoMain.js
│   │   ├── components
│   │   ├── pages
│   │   └── style
│   └── pc
│       ├── PcMain.js
│       ├── components
│       ├── pages
│       └── style
├── index.js
└── style
    ├── GlobalStyle.js
    ├── MediaQuery.js
    └── Theme.js

• style
  • 전역으로 적용할 css
  • 미디어 쿼리 및 react-responsive에 사용할 컴포넌트 생성
• device : mo / pc 페이지 구분
  • pages : 각각의 페이지
  • style : 공통으로 사용하는 스타일
  • components : 공통으로 사용하는 컴포넌트 (ex: function, header, footer .. )
  • main.js : 전체 PC 페이지

전체 Style 및 Breakpoint 지정

GlobalStyle.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "Noto Sans KR", sans-serif;
    font-style: light;
    font-weight: light;
    src: url("./NotoSansKR-Light.otf") format("truetype");
  }
  
  html {
    font-family: "Noto Sans KR", sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 10px;
    @media (max-width:1900px) {
      font-size: 9px;
     }
    @media (max-width:1550px) {
      font-size: 8px;
     }
    @media (max-width:1250px) {
      font-size: 7px;
     }
  }
  * {
    font-family: "Noto Sans KR", sans-serif;
    margin: 0;
    padding: 0;
    
  }

  body {
    box-sizing: border-box;
    font-family: "Noto Sans KR";
    
  }
`;

export default GlobalStyle;

• 사용할 폰트 불러오기
• rem의 기준으로 할 폰트 사이즈 정하기

MediaQuery.js

import { useMediaQuery } from 'react-responsive'

const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ maxWidth: 1680 })
  return isDesktop ? children : null
}
const Labtop = ({ children }) => {
  const isLabtop = useMediaQuery({ maxWidth: 1366 })
  return isLabtop ? children : null
}
const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ maxWidth: 1024px })
  return isTablet ? children : null
}
const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 768px })
  return isMobile ? children : null
}
const Default = ({ children }) => {
  const isNotMobile = useMediaQuery({ minWidth: 768px })
  return isNotMobile ? children : null
}
export {Desktop, Labtop, Tablet, Mobile, Default}

• react-responsive로 사용할 기기별 breakpoint 설정

 Theme.js

const size = {
  mobile: "768px",
  tablet: "1024px",
  laptop: "1366px",
  desktop: "1680px",
};

const theme = {
  mobile: `(max-width: ${size.mobile})`,
  tablet: `(max-width: ${size.tablet})`,
  laptop: `(max-width: ${size.laptop})`,
  desktop: `(max-width: ${size.desktop})`,
};

export default theme;

• Styled-components 에 사용할 기기별 breakpoint

Router Theme.js GlobalStyle.js 적용

Index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from "styled-components";
import App from "./App";
import GlobalStyle from "./style/globalStyle";
import theme from "./style/theme";

ReactDOM.render(
  <BrowserRouter>
    <ThemeProvider theme={theme}>
      <App />
      <GlobalStyle />
    </ThemeProvider>
  </BrowserRouter>,
  document.getElementById("root")
);