[2023.05.13 개발 일지] 리액트 desktop 반응형 대응하기

728x90

크롬 개발자 도구에서 화면 크기별로 테스트 해보는 중에 1024px에서 문제가 발생했다.

1024px를 데스크탑의 최소 크기로 정해놓고 반응형을 구현했다.

그래서 1024px 부터 헤더에 검색바와 desktop navigator가 보여야하고 로고는 좌측에 배치되어야 한다.

하지만 딱 1024px에서만 문제가 발생한다.

const StyledNav = styled.nav`

display: flex;

align-items: center;

justify-content: center;

height: 100%;

color: #FFF;

@media screen and (max-width: 1023px) {

display : none;

}

max-width가 1024px 이하 일때 데스크탑 네비게이션이 보이지 않도록 했었는데 1024부터 데스크탑으로 구분하기로 했기때문에 1023px로 변경해주었다.

이런식으로 1024px과 관련된 설정을 1023px로 바꿔주었다.

하지만 이렇게 하면 제대로 작동은 되지만 1022px 까지만 모바일 화면이 적용되고 1023px부터가 desktop 화면이 적용된다.

실제 기기는 1023px는 없고 1024px 이상이기때문에 상관은 없으나 껄끄럽다.

예전 경험 상으로 아마 min-width를 사용하지 않고 max-width를 사용해서 발생하는 문제 같다.

또한 px크기를 상수화 시켜놓지 않아서 수정이 번거롭고 min-width와 max-width를 혼합해서 사용하니 헷갈렸다.

보여야할 컴포넌트가 특정 크기 이상 혹은 이하일 때 display : none 이 되도록 하는 것보다는 특정 크기 이상 혹은 이하일 때 보이도록 만드는게 더 논리적이고 덜 헷갈릴 것이다.

const StyledNav = styled.nav`

display: none;

@media screen and (min-width: 1024px) {

display: flex;

align-items: center;

justify-content: center;

height: 100%;

color: #fff;

}

그래서 기본 스타일을 display : none으로 설정하고 기기별 크기를 min-width로만 구현하는 식으로 수정했다.

min-width를 사용하니 반응형이 정상적으로 작동했다.

export const MOBILE_BREAKPOINT_NUMBER = 480;

export const TABLET_BREAKPOINT_NUMBER = 768;

export const DESKTOP_BREAKPOINT_NUMBER = 1024;

export const LARGE_BREAKPOINT_NUMBER = 1280;

또한 px크기를 상수화 시켜 재사용성을 높이고 코드를 집중화 했다.

728x90