[220420] 리액트에서 css 사용하기

webpack에서 css를 사용하기

원래는 사용 못한다. 왜냐, webpack을 사용하는것은 node.js환경이라는 말과 같기때문.

하지만 import되는 파일은 웹팩이 알아서 번들을 만들고 있으니까 css파일도 import해서 번들을 해주면 어떨까

<!--css-loader  인라인 형태-->
<div className="app"></div>

<!--mini-css-extract-plugin-->
<--html link-->
<style></style>

 

이걸 위해서 다음 라이브러리를 설치해준다.

$ npm install -D mini-css-extract-plugin css-loader

 

webpack.confing.js에 다음 코드 작성

string 형태인 백틱(``)안의 내용을 구분하기위해 vscode-styled-components를 설치했다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
module:{
	rules:[
    	{...},
        {	//css 내용 시작
	        //이런식으로 옵션을 추가해나간다
            test:/\.css$/,
            //use:[{
                //loader:MiniCssExtractPlugin.loader,
                //options:{
                    //esModule:false,
                //}
            //},
            //'css-loader',
            //]
            use:[MiniCssExtractPlugin.loader, 'css-loader'] //한줄로 쓰기
        }
    ]
},

plugins:[
    new webpackPlugin(),
    new MiniCssExtractPlugin({filename:'style.css'}) //추가
],

 

---

 

import & require 내보내는 방법

//require 형태로 파일을 내보내고 받는 방법
require(a.js)
module.exports={
	a:'hello world'
}

//import 형태로 파일을 내보내고 받는 방법
import App
export default App

 

---

 

리액트에서 css를 사용하는 3가지 방법

1. css파일 import 해오기

여러 css 파일들을 하나로 뭉쳐서 하나의 css로 만들어서 내보낸다.

가장 쉽게 사용할 수 있지만 클래스명 중복 가능성이 제잎 높아서 클래스 관리가 필요함. 

(간혹 변경사항이 적용이 안 될때가 있는데, 당황하지말고 에러메세지를 읽고 해결하거나 서버를 닫았다가 다시 열자.)

//App.js
import './assets/a.css'

//index.html
<link rel="stylesheet" href="./dist/style.css">

 

dist > style.css 파일에 다음과 같은 내용이 생김

/*!********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/assets/a.css ***!
  \********************************************************************/
.color{
    background: red;
}

 

 

---

 

2. css module 만들기

파일명.module.css -> 보통 이런 형태로 많이 씀
App.jsx 파일에 대한 css 파일이므로 -> App.module.css

//App.jsx
import styles from './assets/App.module.css'
...
class App extends Component{
    state={
        value:'hello world!!!'
    }
    render(){
        return(
            <>
                <div className={styles.color}>여기는 module css</div>
            </>
        )
    }
}

 

dist > style.css 파일에 작성한 css 속성이 아래부분에 추가된걸 볼 수 있다.

자동적으로 클래스명이 바뀌어서 저장되기때문에

css파일을 import 한것과는 달리 module을 만들어서 실행하면 문제가 없다.

/*!********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/assets/a.css ***!
  \********************************************************************/
.color{
    background: red;
}
/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/assets/App.module.css ***!
  \*****************************************************************************/
.fTtITvhtziGAAbeN4Bs2{
    color: blue;
}

 

 

---

 

3. styeld-component 만들기 (가장 많이 쓰이는 방법)

style-component 라이브러리 설치

$ npm i styled-components

 

css코드를 입힌 컴포넌트를 만드는 styled-component

import styled from 'styled-components'

const Button = styled.button`
    background:#000;
    border:none;
    color:#fff;
    padding:7px 14px;
`
//백틱을 사용함 = string 형태
//<button styled="background...border color #fff padding 7px 14px"></button>
//이걸 다 쓰기에는 너무 기니까, 아예 스타일을 입힌 컴포넌트를 만들어버림
//<Button></Button> : 스타일이 먹힌 컴포넌트

const HoverButton = styled(Button)`
    background:#007bff;
    :hover{
        background:#0069d9;
    }
`
//새로 덮어씌우는 css 속성

class App extends Component{
    state={
        value:'hello world!!!'
    }
    render(){
        return(
            <>
                <Button>하이</Button>
                <Button>두번 하이</Button>
               
            </>
        )
    }
}

export default App;

 

 

props값을 받을 수 있다

const ActiveButton=styled(Button)`
    background:${(props) => {props.background}}
`

class App exntends React.Component{
	render(){
    	return(
        	<>
	            <ActiveButton background="#333">세번 하이</ActiveButton>  
            </>
        )
    }
}

 

 

---

 

props 값 가져오기 응용편

const ActiveButton=styled(Button)`
    background:${(props) => {props.background}};
    display:${(props)=>{
        let flag;
        if(props.background === '#333') flag = 'none';
        return flag;
    }};
`