react에서 text길이에 따라서 css 속성 변경

js에서 비교문을 넣지 않고 text의 길이에 따라서 css 속성을 변경하려고 하는데 구글링해도 입맛에 맞는 마땅한게 없어 보여서 직접 잔머리좀 굴려 보았다.

 

CSS

css에서 data-length 값에 따라 css속성을 부여한다.

...

.wrap > :global(.global-header) .new-count[data-length="1"] { left: 25px; }
.wrap > :global(.global-header) .new-count[data-length="2"] { left: 23px; }
.wrap > :global(.global-header) .new-count[data-length="3"] { left: 20px; }

...

 

JS

css 판단할 수 있도록 text의 길이를 data-length에 넣어준다.

...

const Home = (props) => {
  ...

  const unreadNotificationCount = my?.UNREAD_NOTIFICATION_CNT;

  return (
    ...

    <img className={cx('alarm')} src="/images/button_title_bell_off_gray100_48.svg"></img>
  
    {unreadNotificationCount > 0 && (
      <span className={cx('new-count')} data-length={unreadNotificationCount.toString().length}>
        {unreadNotificationCount > 99 ? 99 + '+' : unreadNotificationCount}
      </span>
    )}
  
    ...
  );
};

export default Home;

 

아래와 같이 결과물이 완성되었다.!

 

짝짝!