[Spring, React] jsx와 css 파일 연결, 연결된 css가 아니어도 jsx 페이지에 영향을 주는 경우

 

 

고객 관리 페이지를 참고하여
관리자 관리 페이지를 만들고 있다.
분명 각 페이지에 css 파일을 다르게 연결시켰는데,
왜 수정이 동시에 되는걸까?

 

 

 

 

 

1. 화면

아래와 같은 화면을 만들었다. 아래 페이지는 관리자를 관리하는 페이지 중 검색창 화면이다. 이 페이지를 만드는데, 전에 미리 만들었던 고객 관리 페이지의 검색창 코드를 그대로 가져왔다.

 

 

 

---

 

 

 

 

2. 문제와 원인

• 문제
  고객 관리 페이지 중 검색을 담당하는 jsx는 CustomerAdd.jsx이다. 이 jsx는 CustomerTable.css와 연결되어있다. 그리고 관리자 관리 페이지 중 검색을 담당하는 jsx는 AdminAdd.jsx이다. 이 jsx는 PermissionSetting.css와 연결되어있다.
  
  그런데 PermissionSetting.css를 수정하면 CustomerAdd.jsx와 AdminAdd.jsx가 동시에 화면 변경이 이뤄지는 걸 발견했다. 그리고 그 반대도 마찬가지였다. CustomerTable.css를 수정하면 CustomerAdd.jsx와 AdminAdd.jsx 모두 수정되었다.
  
  
  
• 원인
  CSS가 전역으로 설정되어있기 때문이다. 쉽게 설명해보겠다. search-title이란 클래스명이 CustomerTable.css에 있다고 가정하자. 내가 AdminAdd.jsx를 PermissionSetting.css와 연결시켜놨어도 AdminAdd.jsx에 search-title이란 클래스명을 사용하고 있으면 CustomerTable.css의 영향을 받게된다.(반대도 마찬가지) 그 이유가 CSS가 전역으로 설정했기 때문이다.
  
  

 

 

---

 

 

 

 

3. 해결방법

• 클래스명을 페이지마다 다르게 변경
  .search-title을 동일하게 사용하지 않고, admin-search-title로 이름을 변경하는 방법이 있다. 가장 쉬운 방법이다.
  
  
• 부모 범위를 붙여서 범위 제한
  .permission-page .search-title {...} 혹은 .cutomer-page .search-title {...} 이런식으로 어느 페이지에서 쓰는지 범위를 붙이는 것이다. 만약 코드를 모두 작성한 경우 부모 범위를 붙여서 범위 제한을 하는 방법이 가장 덜 수정하는 방법이 된다. 이때 permission-page와 cutomer-page는 해당 css에서 맨 위에 작성한 클래스명이 된다. (페이지의 전체 크기를 설정한 클래스)
  
  
• CSS Modules를 사용
  PermissionSetting.css를 PermissionSetting.module.css로 만든다. 그리고 아래의 코드처럼 해당 jsx에 코드를 수정하면 된다.

import styles from "./PermissionSetting.module.css";
<div className={styles.searchtitle}>

 

---

 

 

 

 

4. jsx에 css 파일 연결 방법

연결하고 싶은 css 파일의 path를 import하면 된다.
import "./PermissionSetting.css";