[react] module styles.className 2개 사용 & 조건값으로 사용하는 패키지 classnames

안녕하세요! 좋아요요정입니다. 

className을 두개 이상 사용하고 싶을 때, 조건 결과값에 맞게 출력하고 싶을 때 사용하는 패키지를 소개합니다.

 

 

결과 미리보기 💕

- 동일한 card 컴포넌트인데 상단 3개는 main 클래스를 적용함.

- 설정된 클래스명이 있을 경우 적용됨

 

 

 

1. 설치하기

Yarn add classnames
//혹은
npm i classnames

- 사용할 프로젝트에 설치해주세요! 

 

 

2. 간단한 사용 방법(git에 작성되어 있는 내용)

import classNames from 'classnames';
...


classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

값이  true일 경우 클래스네임이 포함되게 사용할 수 있습니다. 두개 그 이상도 사용 가능해요 :) 굿굿!!

출처: https://www.npmjs.com/package/classnames

 

 

 

 

3. 사용방법

- 컴포넌트에 커스텀클래스명을 전달하고, 그 값을 포함한 스타일을 적용. 

- 조건:  module.css 사용

 

컴포넌트

import React from 'react';
import styles from './card.module.css';
import cn from 'classnames'; //cn으로 명칭 변경

const Card = ({customClassName, card}) => {
	function getStyles(customClassName) {
    	if(!customClassName) {return;}
        switch(customClassName) {
        	case 'main' : return styles.main;
            default : return;
        }
    }
    
    return (
    	<li className={cn(styles.card, getStyles(customClassName))}>
        	<h3>Test</h3>
            <p>Testing...{card.name}</p>
        </li>
    )
};


export default Card;

- props 인자로  customClassName을 받습니다.

- getStyles() 함수를 통해 값이 있을 경우 값에 해당하는 styles.클래스명을 출력합니다. 

 

 

사용하는 위치

import React from 'react';

const Home = (props) => {
	const cards = [
    	{name: 'card1', value: 5, key: 1},
    	{name: 'card2', value: 5, key: 2},
    	{name: 'card3', value: 5, key: 3},
    ]
    return (
    	<>
        	<h1>home11</h1>
            <ul>
            	{ cards.map(card => <Card customClassName="main" key={card.key} card={card} />}
            	{ cards.map(card => <Card key={card.key} card={card} />}
            </ul>
        </>
    )
}

export default Home;

- 커스텀클래스명이 필요할 경우 인자값으로 전달합니다.

 

 

 

getStyles() 함수를 사용한 이유는 `styles.${customClassName}`으로 바로 입력할 경우 문자열로 인식되어  적용되지 않았습니다. 

그래서 함수를 이용해 없는 경우 return,   설정된 값이 있는경우 적용할 수 있도록 구현했습니다.

 

 

누군가에게 필요한 정보였기를! 좋은 하루되세요~~