19.12.04 module.css & styled-components css (local css)

className을 자바스크립트로 캡슐화하여 css 사용하는 방법

파일 구조
src/Components/Header/index.js
src/Components/Header/Header.js
src/Components/Header/Header.module.css

Header.module.css

.navList {
   display: flex;
 }

.navList:hover {
   background-color: #ddd;
}

Header.js

import React from "react";
import styles from "./Header.module.css";

export default () => (
  <header>
    <ul className={styles.navList}>
      <li>
        <a href="/">Movies</a>
      </li>
      ...

• 해당 module.css를 임포트
• css를 입히고 싶은 태그에 className={styles.navList} 기재
  (클래스 명은 module.css에 기재한 것과 공통으로 작성)

index.js

import Header from "./Header";

export default Header;

• Header 호출하여 사용 가능

=> navList 클래스를 global하게 적용되지 않게 하려면?

---

해당 컴포넌트에서만 작동하는 css 기재법

파일 구조
src/Components/Header/index.js (삭제)
src/Components/Header.js
src/Components/Header/Header.module.css (삭제)

설치한 패키지

yarn add styled-components

Header.js

import React from "react";
import styled from "styled-components";

const Header = styled.header``;
const List = styled.ul`
  display:flex;
  &:hover{
    background-color:#ddd;
  }
`;

export default () => (
  <Header>
    <List>
      <li>
        <a href="/">Movies</a>
      </li>
      ...

• 작은 규모의 프로젝트에 css를 사용할 때 좋다
• styled-components를 사용하면 해당하는 css 컨포넌트 생성이 가능하다
• css가 global하게 작동하지 않아 중복 기재를 방지할 수 있다