6. className, style 다루기

리액트에서는 class 대신 className 을 사용한다.

 

또한 하나씩 지정할때에는, module.css 를 사용한다.

 

.css 는 "전체 적용"을 불러오기에,

.module.css 를 적극 활용하는 중이다.

 

사용하는 방법 몇가지를 알아보자.

 

1. className 의 지정

import styles from "./...module.css"

<div className={styles.maindiv}> </div>

 

2.  동적 className 의 지정

1. 동적 className 을 지정할때, "" 없이, 지정해야 한다는 점을 명심

        import styles from "./...module.css"

        const condition = true;
            let dynamaicStyle;		

            if (conditions) {
                dynamaicStyle = styles.red;		// "" 없음을 명심
            } else {
                dynamaicStyle = styles.blue;	// "" 없음을 명심
            }

            return (
              <div className={dynamaicStyle}> Title </div>
          
2. "" 를 사용하려면, styles["스타일"] 을 이용

	: 대괄호를 사용하면 "" 안에 쓴 스타일도 적용된다
    
        const condition = true;
        let dynamaicStyle;

        if (conditions) {
            dynamaicStyle = "red";		// "" 있다.
        } else {
            dynamaicStyle = "blue";		// "" 있다.
        }

        return (
-          <div className={styles[dynamaicStyle]}> Title </div>	// [ ]를 사용한다.

 

3. 여러개의 className 추가하기

   1. `className = {${} ${} ${} ...}` 하여 추가한다.

        <div> className={`${styles.cart} ${styles.bump}`} onClick={toggleModal}> </div>
        
   
   2. 동적 지정과 결합
   
   	const dynamicStyle = `${styles.cart} ${styles.bump}`
        
        <div> className={dynamicStyle} onClick={toggleModal}> </div>

 

4. 직접 컴포넌트함수에서 style 관리하기 [ 가장 우선순위 ]

1. 컴포넌트 함수에서 style 관리하기
    
    <label style={{ color: "red", fontSize: "40px" , ...}}> Title </label>

2. 컴포넌트 함수에서 동적 style 관리하기

    <label style={{ color: 조건 ? "red" : "blue" }}> Title </label>