[React] css 적용하기

1. css 파일을 import하기

2. css.module 만들기

3. styled-components 패키지 사용

---

React에서 css를 적용시키는 3가지 방법을 소개해 보려고 한다.

 

1. css 파일을 import하기

import React, {Component} from 'react';
import './assets/a.css';
import './assets/b.css';

class App extends Component{
    state = {
        value:'hello world~~123'
    };
    render() {
        return(
            <>
                <div className='colors'>{this.state.value}</div>
            </>
        )
    }
};

export default App;

App 컴포넌트의 state의 value 값이 'hello world~~123'이라고 되어 있는데 여기에 css를 입히려고 한다.

 

src 안의 assets 디렉토리에 a.css와 b.css를 아래와 같이 각각 작성해준다.

// a.css
.colors {
    color:red;
}

// b.css
.colors {
    color:blue;
}

css 파일 자체를 import하는 경우에는 class나 id 이름이 겹치면 서로 영향을 받는다. 위의 경우에도 a.css보다 b.css를 나중에 import 했기 때문에 'hello world~~123'이라는 글자는 파랑색으로 나타난다.

 

 

2. css.module 만들기

import React, {Component} from 'react';
import styles from './assets/App.module.css';

class App extends Component{
    state = {
        value:'hello world~~123'
    };
    render() {
        return(
            <>
                <div className={styles.colors}>module css</div>
            </>
        )
    }
};

export default App;

두 번째 방법은 css.module을 이용하는 것이다. assets 디렉토리 안에 App.module.css를 만든다. 보통 module.css 앞에 컴포넌트의 이름을 붙인다. (App 컴포넌트 → App.module.css)

 

import styles from ~ 이라고 적었기 때문에 App 컴포넌트의 <div> 태그 className에도 styles라는 이름을 맞춰주어야 한다.

 

// App.module.css
.colors {
    color:yellow;
    display: inline-block;
}

이번에는 'module css'라는 글자가 노랑색으로 나타나는 것을 볼 수 있다.

 

 

3. styled-components 패키지 사용

$ npm i styled-components

먼저 위의 명령어로 styled-components 패키지를 설치한다.

 

import React, {Component} from 'react';
import styled from 'styled-components';

const Button = styled.button`
    background: #000;
    border: none;
    color: #fff;
    padding: 7px 14px;
`;

const HoverButton = styled(Button)`
    background: #007bff;
    :hover {
        background: #0069d9;
    }
`;

const display = (props) => {
    let flag;
    if (props.background === '#333') flag = 'none';
    return flag;
};

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

class App extends Component{
    state = {
        value:'hello world~~123'
    };
    render() {
        return(
            <>
                <Button>button</Button>
                <HoverButton>button</HoverButton>
                <ActiveButton background="#333">button</ActiveButton>
            </>
        )
    }
};

export default App;

Button이라는 변수를 <button> 엘리먼트에 css를 입힌 것으로 선언했다.

 

이 Button을 마우스로 호버링했을 때 원래 css는 그대로 유지하고 background만 다르게 하고 싶다면, HoverButton처럼 styled(Button) 뒤에 백틱(`)을 쓰고 그 안에 바뀌는 부분만 작성해주면 된다.

 

display 라는 함수처럼 특정 조건에 따라 flag 값을 다르게 하여 ActiveButton처럼 어떤 경우에는 보이지 않게끔 설정할 수도 있다. 이는 다크 모드에 활용할 수 있다.

 

React에서는 styled-components 패키지를 이용한 방법을 가장 많이 쓴다고 하니 여기에 익숙해져야 할 것 같다.