Quick Drop 2주차 회고

2주차도 yalla

미디어 쿼리 모듈화

미디어 쿼리

모바일과 태블릿의 등장으로 각 플랫폼 별 UI를 설정해줄때 사용하는 것이 미디어쿼리.

• theme.js

const deviceSizes = {
  mobile: '375px',
  tablet: '1024px',
  laptop: '1440px',
};

const device = {
  mobile: `screen and (min-width: ${deviceSizes.mobile})`,
  tablet: `screen and (min-width: ${deviceSizes.tablet})`,
  laptop: `screen and (min-width: ${deviceSizes.laptop})`,
};

const theme = {
  device,
};

export default theme;
export const COLOR = {
  // 색상 코드를 정해놓고 필요한 곳에서 import 해서 사용하기
  black: '#323232',
  gray: '#A6A6A6',
  white: '#fff',
  mainGreen: '#D0DB40', // 메인 배경색
  lightGreen: '#E8EF98',
};

• Home.jsx

const MobileContainer = styled.div`
  @media ${({ theme }) => theme.device.mobile} {
    width: 100%;
  }
  @media ${({ theme }) => theme.device.laptop} {
    display: none;
  }
`;

이런식으로 일일히 미디어쿼리를 각 요소마다 설정하는 것이 아닌, Props를 내려받아서 theme.js만 수정하면 되도록 모듈화를 진행하였다.

그리고 모바일 기반 디자인이라서 max-width 가 아닌 min-width로 설정하였다.
min-width 다보니, 최소 375px ~ 1440px 까지는 컨텐츠가 등장하다가,
1440px 부턴 display:none이 적용된다.

React Router dom 적용

페이지를 이동하는 것을 Routing 이라고 하는데 ,이때 필요한 것이 바로 react-router-dom 이다.
사용방법은 매우 간단한데,

1. index.js(최상위 컴포넌트)를 BrowerRouter 태그로 감싸주어야 한다.

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

2. App.js 에서 Route를 추가하고, path 부분에 파라미터를 설정한다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Onboarding />} />
      <Route path="/home" element={<Home />} />
      <Route path="/search" element={<Search />} />
    </Routes>
  );
}

code Refactoring

기존에 color.js 에는 색상 팔레트를,
이번에 미디어쿼리를 모듈화하면서 theme.js 를 새로 추가하여 올렸는데,
팀원분께서 이를 합쳐서 사용하는 건 어떠자고 하셨다.

theme.js 에 스타일 관련 코드를 모아두는 형식으로 refactoring 하자고 하셔서 그렇게 진행하기로 하였다.

const deviceSizes = {
  mobile: '375px',
  tablet: '1024px',
  laptop: '1440px',
};

const device = {
  mobile: `screen and (min-width: ${deviceSizes.mobile})`,
  tablet: `screen and (min-width: ${deviceSizes.tablet})`,
  laptop: `screen and (min-width: ${deviceSizes.laptop})`,
};

const theme = {
  device,
};

export default theme;

export const COLOR = {
  // 색상 코드를 정해놓고 필요한 곳에서 import 해서 사용하기
  black: '#323232',
  gray: '#A6A6A6',
  white: '#fff',
  mainGreen: '#D0DB40', // 메인 배경색
  lightGreen: '#E8EF98',
};

CreateRoot 로 변경

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

콘솔에 요런 에러가 뜨는게 아닌가...

• 기존 코드

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• 변경 후

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

reportWebVitals();

createRoot 를 사용한 react 18에서 StrictMode 사용시, react-router-dom v5가 제대로 작동하지 앟는 오류가 있다고 한다.
따라서 react 18을 사용하기로 했다면 최신 버전의 react-router-dom 을 사용해 주어야 한다.
또 hydration 방법에서도 차이점이 존재한다고 하는데,
아직 Server Side Rendering을 배우지 못해서 다음 기회에 살펴보는 걸로 하자.