반응형 컴포넌트 깔쌈하게 만들기

한 줄 요약

• 모바일, 데스크탑 등 브라우저의 화면 크기에 따라 서로 다른 컴포넌트를 보여줘야 할 때, <Responsive /> 컴포넌트를 만들어 깔끔한 코드를 유지해보자

분기 처리의 한계

프론트엔드 개발자라면 모바일 화면과 태블릿 그리고 데스크탑 화면까지 고려해야 하는 경우가 많다.

흔히 미디어쿼리(media query) 기법을 활용하여 분기 처리를 통해 각각의 화면에 서로 다른 컴포넌트를 보여주는 것도 방법이 될 수 있다.

export default function Responsive() {
  const isMobile = useMediaQuery('(max-width: 768px)'); // Breakpoint for mobile

  return isMobile ? <MobileComponent /> : <DesktopComponent />;
}

하지만 위 코드의 문제점은 무엇일까?

유지 보수 측면에서 생각해보자.

지금 당장은 모바일 여부만 분기 처리하면 되지만, 추후에 각종 디바이스에 대한 요구 사항이 들어온다면? 예를들어, watch나 tvOS에도 서포트해야 한다고 하면 분기 처리가 꽤 복잡해질 수 있다. 가독성이 나빠지고, 버그가 발생할 수 있으며, 개발자의 공수가 들어갈 것이다.

또한 위 <Responsive /> 컴포넌트는 현재 구현상으로는 재활용이 어렵다. MobileComponent와 DesktopComponent 말고 다른 컴포넌트를 보여주고 싶어지지 않을까? 이들을 외부로 주입받으면 되지 않을까?

반응형 분기처리를 위한 전용 컴포넌트 만들기

이런 고민 끝에 다음과 같이 개선해볼 수 있다

export default function Responsive() {
  const isMobile = useMediaQuery('(max-width: 768px)'); // Breakpoint for mobile

  return isMobile ? mobile : desktop
}

⭐️사용처:

    <Responsive 
      mobile={<MobileComponent />} 
      desktop={<DesktopComponent />} 
    />

이로서 사용하는 곳에서는 원하는 컴포넌트를 각각의 prop에 주입시켜 주면서 무제한으로 재활용이 가능해진다. 확장성을 챙긴 것이다.

분기 처리 또한 기존 코드보다 한결 간결해진 느낌이다.

실제로 적용해보기

최근 사이드 프로젝트로 진행 중인 영화 스트리밍 웹사이트에 적용해보았다:

이것저것 때려박은 코드 블럭이 단 한줄로 표현할 수 있을만큼의 효과를 얻었다.