[짜잘한 react] 리액트 module.css 클래스 명

0. 들어가기전에

• 항상 module.css를 잘 활용하고 싶은데 묘하게 class명들이 말을 듣지않아 싹 정리해 보았다.

1. 기본 클래스명

• {}괄호 안에 써준다.

// 가져와서
import styled from './DandD.module.css';

//{} 괄호 안에 써주면 된다.
  <li
className={style.name}
                      >

2. 다중일 경우

• {}괄호 안에, `백틱안에, ${}로 나눠 사용한다

  <li
className={`${style.name} ${style.color}}
                      >

3. map을 돌려, props를 받아 쓰고 싶은 경우

• []안에 받고자하는 props를 넣어준다

  <li
className={style[color]}
                      >

4. map을 돌려, props를 받아 쓰고 싶은 데, 다중인 경우

• {}괄호 안에, `백틱안에, ${}로 나눠 내부에서 []사용하여 props를 받아온다.

  <li
 className={`${styled.li} ${styled[id]}`}
                      >

5. map을 돌려, props를 받아 쓰고 싶은 데, 다중인 경우이고, props 앞에 뭘 붙이고 싶은 경우

• {}괄호 안에, `백틱안에, ${}로 나눠 내부에서 []사용하여 props를 받아온다.
• props를 받아온 []괄호에 ''를 붙여 string값을 입력한다.

  <li
 className={`${styled.li} ${styled['my'+id]}`}
                      >