[React] css 적용 방법 참고

css를 적용하는 방법엔 여러가지가 있다

• 인라인 방식은 유지보수가 힘들고 가독성이 좋지 않아서 피하고 있다
• 원래는 css 파일을 따로 만들고 바로 import 하는 방식을 사용했다
  
  • 이 방식은 css가 import 한 곳에 한정되지 않고, 전체 모듈에 적용된다
  • 클래스명이 중복되면 안된다는 뜻
    (A.js 에서 A.css를 import 하고, B.js에서 B.css를 import 했다고 해도 각각 적용되지 않고 공유된다)
  •  페이지 수가 적은 프로젝트에선 괜찮았는데, 페이지가 조금만 많아져도 꼬였다 ㅠ_ㅠ
  • 클래스명 앞에 파일 이름을 붙이거나 부모선택자를 꼭 작성해줘서 중복을 피했지만,
    클래스명이 길어지거나 코드가 길어져 좋지 않은 방법 같았다
• css-module을 사용하기로 했다
  • 클래스명에 hash 값을 붙여 고유한 값으로 만들어준다고 한다
  • 파일을 import하는 것은 똑같지만 import할 때 변수를 만들어주고 {변수.클래스명} 이렇게 사용한다
    • 난 원래 css에서는 단어 연결할 때 하이픈(-)을 사용하는데 이 경우엔 언더바(_)를 써야 한다
    • css 파일명에는 .module을 붙여주어야함! (파일명 : 이름.module.css)

// import 할 때
import styles from "./page.module.css";

// page.module.css
.container {
	width: 100px;
}
.container_area {
	width: 100px;
}

// 사용할 때
<div className={styles.container}></div>;
<div className={styles.container_area}></div>;

 

클래스명 여러 개 적용

css 모듈이 아니면 <div className="class1 class2"> 이런 식으로 사용한다

css 모듈일 경우에도 사이에 공백을 만들어주면 된다

• 백틱(`) 이용 : <div className={`${styles.class1} ${styles.class2}`}>
• join 이용 : <div className = {[styles.class1, styles.class2].join(" ")}>

 

---

참고 블로그

• https://goddaehee.tistory.com/304
• https://velog.io/@sorious77/React-CSS-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
• https://eunhee-programming.tistory.com/205