[오류해결] Next.js에서 반응형 웹 만들기

반응형 웹을 만들기 위해 desktop, mobile 을 이름으로 한 css 속성을 정의하고 페이지 컴포넌트 내에서 필요한 부분에 사용함으로써 반응형 웹을 제작하려고 했었다.

❗️ 오류가 났었던 코드

 

1. desktop, mobile css 정의 - 기준 1024px

import { css } from '@emotion/react';

export const desktop = css`
  display: flex;
  @media (max-width: 1023px) {
    display: none;
  }
`;

export const mobile = css`
  display: none;
  @media (max-width: 1023px) {
    display: flex;
  }
`;

 

2. 원하는 부분에 CSS 적용

import { Flex, Text, desktop, mobile } from '@ceos-fe/ui';

export const Title = ({
  title,
  explain,
}: {
  title: string;
  explain: string[];
}) => {
	// ...
  return (
    <Flex direction="column" margin="80px 0" webGap={12} mobileGap={10}>
    {/* ... */}
      <Flex direction="row" css={desktop}>
        <Text webTypo="Body1">{webString}</Text>
      </Flex>
      <Flex direction="column" css={mobile}>
        {explain.map((ex) => {
          return <Text mobileTypo="Body1">{ex}</Text>;
        })}
      </Flex>
    </Flex>
  );
};

 

❗️ 오류 화면

위와 같이 작성하면, 첫 로딩 시에는

 

1. desktop

2. mobile

과 같이 잘 작동하지만,

새로고침 시에 다음과 같이 mobile 화면에서 desktop css 까지 보여지는 문제가 있었다.

 

 

❗️ 해결방법

css 속성으로 작성해버리면, Next.js에서는 재렌더링 시 css 정보를 캐싱해놓기 때문에 display:none 속성이 제대로 반영되지 않을 수 있다고 한다. 이에, styled를 이용해서 컴포넌트화를 함으로써 해결했다.

 

import styled from '@emotion/styled';

export const Desktop = styled.div`
  display: flex;
  @media (max-width: 1023px) {
    display: none;
  }
`;

export const Mobile = styled.div`
  display: none;
  @media (max-width: 1023px) {
    display: flex;
  }
`;

import { Desktop, Flex, Mobile, Text } from '@ceos-fe/ui';
export const Title = ({
  title,
  explain,
}: {
  title: string;
  explain: string[];
}) => {
// ...
  return (
    <Flex direction="column" margin="80px 0" webGap={12} mobileGap={10}>
      <Desktop>
        <Flex direction="row">
          <Text webTypo="Body1">{webString}</Text>
        </Flex>
      </Desktop>
      <Mobile>
        <Flex direction="column">
          {explain.map((ex) => {
            return <Text mobileTypo="Body1">{ex}</Text>;
          })}
        </Flex>
      </Mobile>
    </Flex>
  );
};