React에서 플러그인 사용시 CSS로 적용하면 배포 후 적용이 되지 않는 현상
문제 발생
플러그인을 사용하다보면 제한적인 부분이 있어 아래와 같이 스타일을 입혀주었다. 근데 배포만 하면 클래스명이 바뀌게 되는 현상이 발생했다.
이로 인해 대공사가 시작되었다.
.iGiRYI button {
font-size: 16px;
}문제 원인
(클래스명이 변경되는 이유)
웹사이트를 만들 때 사용하는 도구 중 하나인 '웹팩'은 여러 파일을 하나로 합쳐주는 역할을 하는데 이 과정에서 CSS라는 디자인 코드의 이름(클래스명)을 바꿔버린다.
왜냐하면, 같은 이름의 디자인 코드가 있다면 충돌이 일어날 수 있기 때문인데 그래서 웹팩은 각각의 디자인 코드에 고유한 이름을 부여해 충돌을 방지해준다.
문제는 배포할 때 이 고유한 이름(해시값)으로 바꾸다 보니 처음에 지정한 디자인과 달라질 수 있다.
해결 방법
1. CSS-in-JS: styled-components와 같은 라이브러리를 사용하여 스타일링하는 방법이다. 직접적으로 컴포넌트에 스타일을 주입하기 때문에 클래스명 충돌 문제를 효과적으로 피할 수 있다.
2. Webpack 설정 변경: 웹팩 설정에서 클래스명 변경 기능(CSS Modules 등)을 끈다.
3. Inline styles: React에서 inline style 속성으로 직접 스타일링하는 방법.
4. !important: 마지막으로, CSS 규칙에 !important를 추가하여 다른 스타일보다 우선순위를 높이는 방법. 하지만 이 방법은 코드의 유지보수성을 저하시키고 예상치 못한 부작용을 일으킬 수 있으므로 주의가 필요하다.
느낀 점
2번 ~ 4번 모두 시도해보았지만. 3번은 코드가 지저분해지기에 제외시켰고 4번은 유지보수나 기타 이유로도 좋지 않은 방법이고 저렇게 시도해보아도 해시값은 바뀐다는 것을 확인하였다.
1번 방법으로 스타일링을 하는 것이 이상없이 작동이 되는 것을 확인할 수 있었다. 다른 에러도 파악해야 했는데 이 문제로 꽤 오랜시간 고민했지만 좋은 경험이 되었다.
