[React-Calendar] 커스텀 스타일 중복 오류 문제

❗ React-Calendar 커스텀 스타일 중복 오류 문제

메인 페이지와 마이 페이지에서 react-calendar 라이브러리를 사용하여 커스텀 스타일을 적용하던 중, 스타일 중복 문제가 발생했다.
마이페이지 ➡️ 메인페이지 ➡️ 마이페이지로 다시 이동하면, 마이페이지에서 적용한 달력 스타일이 메인 페이지에서 적용된 달력 스타일이 적용되는 문제가 있었다.

🤔 문제 원인

React-Calendar에서 스타일을 적용할 때 CSS 파일로 커스텀했기 때문이다. React-Calendar의 경우, 이미 정의된 클래스명을 제공하며, 커스텀 스타일을 적용하려면 일반 CSS 파일에 작성해야 했다.
이는 CSS의 전역 스타일 특성으로 발생한 문제였다.

CSS의 전역 스타일 특성

일반 CSS 파일은 전역적으로 스타일이 적용된다. 따라서 특정 컴포넌트에서만 사용하는 스타일도 동일한 클래스명을 가진 다른 요소에도 영향을 미친다.
예를 들어, React-Calendar에서 react-calendar__tile이라는 클래스명을 일반 CSS 파일로 커스터마이징하면, 다른 페이지나 팀원이 동일한 클래스명을 사용한 경우에도 스타일이 덮어씌워지는 문제가 발생한다.

CSS Modules와의 차이

CSS Modules는 클래스명을 컴포넌트 단위로 고유화한다. 따라서 클래스명이 충돌되지 않도록 보장된다. 예를 들어, react-calendar__tile라는 클래스명이 [컴포넌트명]_react-calendar__tile__hash처럼 변환되기 때문에 다른 컴포넌트의 클래스명과 충돌되는 일이 없다.
그러나 React-Calendar 라이브러리는 CSS Modules를 지원하지 않기 때문에 일반 CSS 파일을 사용해 스타일을 적용해야 했다.
style-component를 사용하는 경우, 컴포넌트 내부에서 스타일을 작성하기 때문에 문제가 없지만 나의 경우는 tailwind를 사용하고 있어서 다른 방안이 필요했다.

💡해결 방안

Calendar 컴포넌트를 감싸는 상위 요소를 만들어 클래스명을 따로 지정해주었다.

    <div className='reading-calendar'>
      <Calendar
        locale='ko'
        view='month'
      />
      <button
        className='reading-calendar react-calendar__navigation__today-button'
        onClick={goToThisMonth}
      >
        오늘
      </button>
    </div>

독서 달력을 스타일 적용하는 css 파일에서 모두 동일하게 .reading-calendar를 작성하여 스타일이 중복되지 않도록 설정한다.

.reading-calendar {
  position: relative;
  width: 600px;
}
.reading-calendar .react-calendar {
  width: 600px;
  padding: 15px;
  border: 1px solid #d9d9d9;
}
.reading-calendar .react-calendar__navigation {
  width: 255px;
  display: flex;
  height: 44px;
  margin-left: 10px;
  margin-bottom: 20px;
}

✔️ 결과

이제 페이지 이동이 있어도 달력 css가 중복 적용이 되지 않는 것을 확인할 수 있다.