React Component 스타일링 방법

진리e·2020년 4월 14일

React UI

목록 보기

1/1

Sass 사용하기

import React, {Component} from 'react';
import './testComponent.scss';

const colorTypeClass = false;
const textClass = 'highlight';

class TestComponent extends Component {
    render() {
        // 조건부 스타일링
        const boxStyle = colorTypeClass ? 'box_color' : 'box';
        
        return (
            <div className={boxStyle}> 
                <div className="text">가나다라마바사아자차카타파하</div>
                
                {/* 클래스명 값으로 받을때 */}
                <div className={textClass}>가나다</div>
                
                {/* 클래스 2개 이상 */}
                <div className="text highlight">가나</div>
                <div className={`text ${textClass}`}>가나</div>
                
                {/* blind : global 클래스 */}
                <i className="icon"><span className="blind">아이콘</span></i>
            </div>
        );
    }
}

export default TestComponent;

출력 내용

<div class="box">
	<div class="text">가나다라마바사아자차카타파하</div>
	<div class="highlight">가나다</div>
	<div class="text highlight">가나</div>
	<div class="text highlight">가나</div>
	<i class="icon"><span class="blind">아이콘</span></i>
</div>

기존 클래스 사용방법과 동일하다.

Css module 사용

import React, {Component} from 'react';
import styles from './testComponents2.module.scss';


// css module 사용 [파일이름]_[클래스이름]__[해쉬값]
// scss - *.module.scss , jsx - import style from '*.scss'
// 클래스이름을 자동으로 고유한 값으로 만들어주면서, 스타일 중복방지

const textClass = 'highlight';

class TestComponent2 extends Component {
    render() {
        return(
            <div className={styles.box}>
                <div className={styles.text}>가나다라마바사아자차카타파하</div>
                
                {/* 클래스명 값으로 받을때 */}
                <div className={styles[textClass]}>가나다라마바사아자차카타파하</div>
                
                {/* 클래스명 2개 이상 */}
                <div className={`${styles.text} ${styles[textClass]}`}>가나다라마바사아자차카타파하</div>
                
                {/* blind : global 클래스 */}
                <i className={styles.icon}><span className="blind">아이콘</span></i>
            </div>
        );
    }
}

export default TestComponent2;

파일 확장자를 .module.scss 를 사용하거나 기본 scss 파일에서 :local 을 사용할 수 있다.
className={style.클래스명}
컴포넌트와 scss 를 매치해서 클래스명 고유화: {컴포넌트이름}_{클래스명}__{난수}
클래스명이 다른 스타일과 중첩되지 않도록 자동으로 방지해준다.
스타일이 로컬에 한정된다.
depth 가 깊어지면 스타일 찾기 어려울 수도 있다.

classnames 사용

import React, {Component} from 'react';
import './testComponent.scss';
import classNames from 'classnames';

const colorTypeClass = false;
const textClass = 'highlight';

class TestComponent extends Component {
    render() {
        return (
            // 스타일링 조건부 처리 
            <div className={classNames({ box : !colorTypeClass, box_color : colorTypeClass })}>
                <div className={classNames("text")}>가나다라마바사아자차카타파하</div>
                
                {/* 클래스명 값으로 받을때 */}
                <div className={classNames({textClass})}>가나다</div>
                
                {/* 클래스 2개 이상 */}
                <div className={classNames("text", "highlight")}>가나</div>
                <div className={classNames("text", {textClass})}>가나</div>
                
                {/* blind : global 클래스 */}
                <i className={classNames("icon")}> <span className="blind">아이콘</span></i>
            </div>
        );
    }
}

export default TestComponent;

className={classNames('클래스명 ')}
다양한 포맷으로 전달 가능 ( 객체형식, 배열형식 )
프로젝트에 조건부 스타일링이 많은 경우에는 편리
참고: https://www.npmjs.com/package/classnames

css module + classnames 사용

import React, {Component} from 'react';
import classNames from 'classnames/bind';
import styles from './testComponents3.module.scss';

const cx = classNames.bind(styles);					// bind

// css module 사용 [파일이름]_[클래스이름]__[해쉬값]
// scss - *.module.scss , jsx - import style from '*.scss'
// 클래스이름을 자동으로 고유한 값으로 만들어주면서, 스타일 중복방지
// classnames 사용, 클래스 조건부 처리 편리

const textClass = 'highlight';

class TestComponent3 extends Component {
    render() {
        return(
            <div className={cx('box3')}>
                <div className={cx('text')}>가나다라마바사아자차카타파하</div>
                
                {/* 클래스명 값으로 받을때 */}
                <div className={cx(textClass)}>가나다라마바사아자차카타파하</div>
                
                {/* 클래스명 2개 이상 */}
                <div className={cx('text', textClass)}>가나다라마바사아자차카타파하</div>
                
                {/* blind : global 클래스 */}
                <i className={cx('icon')}><span className="blind">아이콘</span></i>
            </div>
        );
    }
}

export default TestComponent3;

css module, classnames 를 같이 사용할때
className={cx('클래스명')}
참고: https://velog.io/@velopert/react-component-styling

나는 css module + classnames 방식을 많이 사용한다.
CRA 버전2부터는 둘다 지원하고 있기 때문에 따로 설치하거나 webpack 설정할 필요도 없고 scss 파일명을 FileName.module.scss 로 추가해주면 되니까!

추가로 많이 사용하는 케이스

props 로 일부 클래스명을 받아올때.

className={cx('component',[`type-${color}`])}

클래스명 변수가 많을 경우 깔끔하게 정리해서 사용하자~

// 중괄호를 전부? 🤯
className={cx('button',
              {'is-expanded': isExpanded},
              {fixed: isFixed},
              {shadow: hasShadow},
              {'type-main': isMain})}
              
// 이런 저런 케이스가 많아서 깜빡했나보다 `,` 로 분리해주기
 className={cx('button', {
                'is-expanded': isExpanded,
                fixed: isFixed,
                shadow: hasShadow,
                'type-main': isMain})}

진리e

대충살자