React Js - CSS 모듈

React Js - CSS 모듈

• App.js 에서는 컴포넌트 폴더만 import를 해준다.

  • 컴포넌트 폴더내의 index에 의해 추가 경로는 적을 필요가 없다.

    Components/Header/index.js

     import Header from "./Header";
     ​
     export default Header;

• 하나의 컴포넌트는 다른 컴포넌트에 영향을 미치지 않도록 한다 ( Header.css 가 TV.js 에 영향을 주지 않음)

• CSS 모듈 사용

  className을 지역화 해서 전역에 영향을 끼치지 않도록 한다.

  • 파일의 이름뒤에 .module 추가한다. ex - Header.module.css

  • css를 사용할 js에선 다음과 같은 방식으로 import 한다.

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

  • 사용은 다음과 같이 한다. className={styles.navList}

  최종 구조

• 폴더 구조
  

• App.js

   import React, { Component } from "react";
   import Router from "Components/Router";
   import Header from "Components/Header";
   ​
   class App extends Component {
     render() {
       return (
         <>
           <Header />
           <Router />
         </>
       );
     }
   }
   ​
   export default App;
   ​

• Components/Header/index.js

   import Header from "./Header";
   ​
   export default Header;

• Components/Header/Header.module.css

   .navList{
       display: flex;
   }

• Components/Header/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>
               <li>
                   <a href="/tv">TV</a>
               </li>
               <li>
                   <a href="/search">Search</a>
               </li>
           </ul>
       </header>
   )

출처 : https://academy.nomadcoders.co/