[Next/React] 모바일↔︎PC에 따른 줄바꿈 태그의 선택 적용

웹페이지를 만들다보면 줄바꿈 태그(br)를 디바이스가 모바일이냐 PC냐에 따라 다르게 적용하고 싶을 때가 있다.

예를 들면 모바일에서는 줄바꿈을 했으면 좋겠고 PC에서는 그대로 길게 냅두고 싶은 경우다.

전통적인 방법으로는 css를 활용하는 방법이 있겠다.

빠르게 인터넷을 검색해보니 다음과 같은 코드가 나왔다.

/* 767px 기준 */
@media only screen and (max-width: 767px) {
  br.ignore {
    display: inline-block;
    content: " ";
    padding: 0 2px;
  }
}

global.css 파일 안에 이렇게 정의해준 뒤에 <br className="ignore" />와 같이 사용해주면 모바일 버전에서만 br 태그를 무시할 수 있다.

처음에는 아하 그렇구나 싶었다.

하지만 사용하다보니 무조건 p 태그 안에 위치해야 한다거나, 반대로 PC에서만 br 태그를 무시하고 싶을 때 스타일을 새로 적용해 주어야 하는 등 딱 봐도 여러 한계점이 존재했다.

결국 이러한 불편함에서 벗어나기 위해서 여러 방법들을 찾아보기 시작했다.

useMediaQuery

그 중 하나는 useMediaQuery를 활용하여 isMobile 변수를 만들어서 컴포넌트에 조건을 걸어 사용하는 것이다.

나름 깔끔하게 코드를 정리할 수 있고 isMobile 변수를 필두로 삼항연산자를 사용하여 모바일용 컴포넌트, PC용 컴포넌트를 나누어 렌더링하는 것이 가능했다. 코드 가독성도 나름 올라갔다.

하지만 이러한 방법은 매번 페이지마다 isMobile 변수를 정의해 주어야 한다는 귀찮음이 있었다. 그 외에도 새로고침을 할 때마다 PC화면일지언정 모바일용 컴포넌트가 먼저 렌더링된 후에 PC용으로 전환되는 등의 깜빡임 현상이 존재했다. 이거는 내게 꽤나 큰 스트레스로 다가왔다.

tailwind

결국 돌고 돌아서 tailwind로 돌아왔다.

다행히도 근본 원인이었던 디바이스에 따른 br 태그의 선택 적용 문제도 tailwind를 사용하면서 깔끔하게 해결되었다.

<div className="sm:block hidden"></div> // pc
<div className="sm:hidden"></div> // mobile

div 태그를 예시로 들었지만 br 태그도 똑같이 적용하면 된다.

코드도 한결 간단해졌고 PC용 컴포넌트, 모바일용 컴포넌트에 따라 가장 바깥을 위의 div 예시처럼 감싸주면 해결된다.

코드 간결성, 가독성을 모두 잡을 수 있어서 좋았다.