Component에 css 개별 적용 방법
기존 프로젝트를 React project에 옮기는 중인데, 상당히 골치 아픈 문제가 생겼다.
css를 적용하기 위해서 css 파일의 확장자를 .css에서 .module.css 로 바꾸어 jsx에 import 해주어야 하는데, 이를 적용하려면 className에 {해당 스타일 모듈.스타일 이름} 형식으로 지정해주어야 한다.
이런한 방식의 문제
사실 처음부터 React로 작성했다면 크게 문제되지 않을 수 있지만, 이걸 변환하려다 보니 문제가 된다.
css를 개별 적용하기 위해서 필요한 작업이지만 진행하다 보니 문제점을 찾았다.
렌더링 된 페이지의 코드는 원래 css의 이름이 아니라 모듈명이 앞에 붙은 채로 컴파일된다. 이는 내부 작동 js 코드를 다시 한 번 건드려야 하는 문제가 생긴다.
그래서 어떻게 해야 하나
결국 css 개별 적용을 포기하고 동시에 간섭되게끔 css를 사용해야 할 것 같다. html 파일에 link를 확인했을 때, 대부분 form-input.css 파일을 제외하고는 겹치게 사용하기 때문에 큰 문제는 없을 것 같다.
To Infinity, and Beyond!