[react] css 사용 관련 (inline css, css obj, import css, import css module, composes, global css className)

📍 inline 에 css 적용하려면?

• <h1 style={ {color:"blue"} }> 하이루 ! </h1>
• 리액트에서 style 을 넣으려면 객체로 넣어야하니까!!
• 중괄호가 두개 있어야 함. 

 

📍 css 객체를 밖에서 선언하고 가져올 수도 있음.

• const style2 = {
          color : 'red',
          backgroundColor : 'yellow',
          padding : '5px'
      }
  
  <h1 style={ style2 }>style obj style</h1>

 

 

📍 외부 css 파일을 불러올 수도 있음.

• import './style1.css';
  
  body {
      background-color: green;
      color : orange;
  }

 

 

📍 css 모듈을 사용하는 방법

• 모듈 내부의 css 는 --> 해당 css 모듈을 가져온 컴포넌트에만 사용할 수 있음.
• 이름 충돌에 대한 걱정은 없음 !!
• <h1 className={styles.title} >module css style</h1>

 

---

 

 

📍 CSS Module ?

• 리액트에서 CSS 모듈은 클래스 이름이 기본적으로 로컬 범위로 지정되는 CSS 파일.
• CSS 파일은 .module.css 확장자로 만들어야 함.
  • ex) Button.module.css , Flower.module.css
• 장점?
  • CSS 모듈을 사용하면 특정 컴포넌트에 로컬로 범위가 지정된 CSS를 작성할 수 있음.
  • 이렇게 하면, CSS 클래스 이름 충돌을 방지하고, 스타일을 더 쉽게 유지 관리할 수 있음.
• ------------ 
• ------------
• ⭐️⭐️ composes
  • css module 에서만 사용할 수 있는 기능. 
  • 다른 class 를 상속 받는 개념.
  • .radius2{ composes : title; border-radius: 20px; }
  • <h1 className={styles2.radius2}> == <h1 className={ `${styles2.title}` } style={ {border-radius: 20px;} }> 과 동일함.
  • 개발자모드 켜서 확인해보면, .radius2 먹은 자리에 class 가 두 개로 나와 있음. 
    --> 리액트에서 알아서 처리해줌!!
  • 개발자모드 확인해보기!
    

    

    
    
    

 

 

📍Global class

• .module.css 파일에는       :global(.myheader){ ~~ }      이렇게 적어줘야 함. 
• jsx 파일에서 사용할 때는      <h1 className="myheader" >      이렇게 사용 !! 
  원래는 className 은  {} 중괄호 안에 넣는데,, global 은 "" 안에 넣어줘야 함!!

 

 

import { createRoot } from 'react-dom/client';
import './style1.css';

import styles1 from './style1.module.css';
import styles2 from './style2.module.css';

function App() {
    const style2 = {
        color : 'red',
        backgroundColor : 'yellow',
        padding : '5px'
    }

    return (
        <>
            <h1 className="myheader" >Global는 className="" 에 넣어야함!</h1>
            <h1 style={ {color : "blue"} }>inline style</h1>
            <h1 style={ style2 }>obj style</h1>
            <h1 className={styles1.title}>module css style <br/> - styles1의 .title</h1>
            <h1 className={styles2.title}>module css style <br/> - styles2의 .title</h1>
            <h1 className={`${styles2.title} ${styles2.radius}`}>module css style <br/> - style 클래스를 여러개 넣으려면?</h1>
            <h1 className={styles2.radius2}>module css style <br/> - composes </h1>
            <h1 className={styles2.radius} style={ {borderRadius:"20px", color:"green"} }>module css style <br/> - class & style </h1>
            <p>리액트 기초</p>
        </>
    );
}

createRoot(document.getElementById('reactCss')).render(
    <App />
);

 

# style1.module.css

.title{
    color: blue;
    padding : 20px;
    background-color: white;
    font-size: large;
    border: 3px solid red;
}

 

 

# style2.module.css

.title{
    color: red;
    padding : 20px;
    background-color: orange;
    font-size: small;
    border: 3px solid yellow;
}

.radius{
    border-radius: 40px;
    background-color: blueviolet;
}

.radius2{
    composes : title;
    border-radius: 20px;
    background-color: gray;
    border-color: black;
    color:black;
}

:global(.myheader) {
    padding:10px 20px;
    font-size: 50px;
    color: white;
    background-color: aqua;
}

 

---

출처 : 

[왕초보 홈페이지만들기]

왕초보 홈페이지만들기

 

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.